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

ractivejs 组件嵌套

ractivejs component nesting

nested

custom-component

ractivejs