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标签相同的方式使用自定义标签？

注意：从文档中，我了解与{{＆gt; content}}或{{＆gt; 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组件嵌套

1 个答案: