ractivejs компонент вложенности

Question

В документации, кажется, указывает, что можно гнездовых пользовательских компонентов в других пользовательских компонентов (http://docs.ractivejs.org/latest/components):

<Foo on-Bar.foo="barfooed" on-Baz.*="baz-event" on-*.bippy="any-bippy"> 
    <Bar /><Baz /><Baz /> 
</Foo> 

Однако следующий код отображается только подсказка. Внутренние пользовательские компоненты al-tt-translation и al-tt-input не инициализируются. Фактически, замена этих двух компонентов на строку не приводит к тому, что эта строка передается в любом случае в пользовательский компонент всплывающей подсказки.

tooltip = new Ractive({ 
    el: 'airlang-rdt-tt-container', 
    template: "" + 
     "<al-tooltip>"+ 
     " <al-tt-translation display='{{display_translation}}' translation_lemma='{{translation_lemma}}' result_rows='{{result_rows}}'/> " + 
     " <al-tt-input/> "+ 
     "</al-tooltip>", 
    append: true, 
    components : { 
     'al-tooltip': Component_Tooltip, 
     'al-tt-translation' : Component_TT_Translation, 
     'al-tt-input' : Component_TT_Input 
    }, 
    data : { 
     display_translation : 'block', 
     translation_lemma : 'example' 
    } 
}); 

Должен ли я заключить, что нельзя использовать пользовательские теги так же, как обычные HTML-теги?

Примечание: из документации я понимаю, что есть что-то делать с {{> content}} или {{> yield}}, но я не могу заставить ее работать. Каков правильный способ сделать это?

Answer 1

Для вашего примера, ваш шаблон <al-tooltip> должен иметь либо {{yield}}, либо {{>content}} где-то в нем, чтобы направлять туда, где должен содержаться контент.

Простой пример того, как это работает:

var Outer = Ractive.extend({ template: '<div>{{yield}}</div>' }); 
var Inner = Ractive.extend({ template: '<span>hello world</span>' }); 

var ractive = new Ractive({ 
    el: document.body, 
    template: '<outer><inner/><inner/></outer>' 
    components: { 
     outer: Outer, 
     inner: Inner 
    } 
}) 

производит:

<div><span>hello world</span><span>hello world</span></div> 

{{yield}} означает, что содержание по-прежнему работает в том контексте, в котором она возникла, {{>content}} означает импортировать содержимое в виде частичного и запустите его. В вашем примере это, вероятно, не имеет значения, потому что вы используете компоненты, а не сырые шаблоны.