ractivejs 组件嵌套答案

【问题标题】：ractivejs component nestingractivejs 组件嵌套
【发布时间】：2015-04-25 06:01:30
【问题描述】：

文档似乎表明可以将自定义组件嵌套在其他自定义组件中 (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}} 与此有关，但我似乎无法使其工作。这样做的正确方法是什么？

【问题讨论】：

标签： custom-component nested ractivejs

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

【讨论】：