ractivejs组件嵌套 [英] ractivejs component nesting

问题描述

文档似乎表明可以将自定义组件嵌套在其他自定义组件中(http://docs.ractivejs.org/latest/components):

The documentation seems to indicate that it is possible to nest custom components within other custom components (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未初始化.实际上，用字符串替换这两个组件不会导致该字符串始终传递到工具提示自定义组件.

However, the following code only displays the tooltip. The inner custom components al-tt-translation, and al-tt-input are not initialized. In fact, replacing those two components by a string do not lead to that string being passed in anyway to the tooltip custom component .

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

Should I conclude that it is not possible to use the custom tags in the same way than regular HTML tags?

注意:从文档中，我了解到{{> content}}或{{> yield}}的某些问题，但我似乎无法使其正常工作.正确的方法是什么?

Note : From the documentation, I understand that there is something to do with {{>content}} or {{>yield}} but I can't seem to make it work. What is the right way to do this?

推荐答案

以您的示例为例，您的<al-tooltip>模板需要在其中的某个位置放置{{yield}}或{{>content}}，以指示所包含的内容应到达的位置.

For your example, your <al-tooltip> template needs to have either a {{yield}} or {{>content}} somewhere in it to direct where the contained content should go.

其工作原理的简单示例:

Simple example of how it works:

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

{{yield}} means that the content still runs in the context in which it originated, {{>content}} means import the content as a partial and run it. In your example it probably won't matter because you're using components and not raw templates.

这篇关于ractivejs组件嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！