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转换和al输入未初始化。实际上，用字符串替换这两个组件并不会导致将该字符串传递给工具提示自定义组件。

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}或{> make }有关，但我似乎无法使其工作。怎样才是正确的方法？

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}}意味着将内容作为一个部分导入并运行它。在您的示例中，这可能并不重要，因为您使用的是组件而不是原始模板。