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}}手段導入的內容爲部分並運行它。在你的例子中，它可能並不重要，因爲你使用的是組件而不是原始模板。