2016-11-03 2 views
3

Если у меня есть пользовательский элемент вроде этого:Aurelia - Эталонная модель вида пользовательского элемента внутри слота

export class mycomponent { 
    constructor() { 
     this.name = 'John Doe'; 
    } 
} 

<template> 
    My component 
    <slot></slot> 
</template> 

И использовать этот компонент в другой точке зрения (я зарегистрировал пользовательский элемент глобально):

<template> 
    <mycomponent> 
     Test 
     ${name} 
    </mycomponent> 
</template> 

Возможно ли получить доступ к модели представления mycomponent в этой области? Например, распечатайте его свойство name?

EDIT Так вот мое окончательное решение: gist my solution

Я положил сменную часть внутри моего пользовательского элемента:

<template> 
    <template replaceable part="content"></template> 
</template> 

, а затем атрибут ProcessContent на модели представления:

import { processContent } from 'aurelia-framework'; 

@processContent(replacePart) 
export class MyComponent { 
    name = "John Doe"; 
} 

function replacePart(compiler, resources, node){ 
    node.innerHTML = `<template replace-part="content">${node.innerHTML}</template>`; 
    return true; 
} 

Нравится программа? Поделись с друзьями! Войдите или зарегистрируйтесь, чтобы получить возможность отправлять комментарии.

<h4>Component 1</h4> 
<my-component> 
    <div>One name</div> 
    <strong>${name}</strong> 
</my-component> 

ответ

3

Насколько я знаю, это невозможно с помощью слотов.

Однако у Aurelia есть функция replaceable parts: [Blog post]. Это может быть лучше подходит для ваших требований.

Демо: https://gist.run/?id=dcffe2afcb1eee1777e9b0d9f7366d28

Edit: Хабы документы: [Cheat Sheet/Template Parts]

+0

Хороший ответ. Легкий способ достичь моей цели. Я решил попробовать и извлечь содержимое из слота, а затем скомпилировать его вручную с помощью компилятора вида, но это может сделать проблему более сложной, чем необходимо. Большое спасибо. – John

+0

Да, «сменная» - это особая концепция Aurelia, но при этом она обеспечивает больше функциональности. –

+1

@AshleyGrant: Это замечательная особенность. Я собирался сказать, что он не задокументирован в HUB, но нашел его в Cheat Sheet. :) Обновлен ответ, чтобы иметь этот официальный источник. –