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}}手段导入的内容为部分并运行它。在你的例子中，它可能并不重要，因为你使用的是组件而不是原始模板。