Question

我想编写用ractivejs库定义的组件。我知道我可以在一个模板中执行此操作，让它们彼此相邻。例如：

template : "<Component1 /><Component2 />"

但我想做的是嵌套组件，就像

template : "<Component1 />"

并在Component1的定义中：

template : "<Component2 />".

我的问题是：这可能吗？使用我当前的代码，我收到以下错误：

Uncaught ParseError: Illegal tag name at line 1 character 224:
<div id='rdt-tt' class='rdt-tt-transover' style='display: {{display}}; top: {{top}}; left: {{left}}; width:{{width}}; height:{{height}}; text-align: {{text_align}}; position:fixed;  white-space:nowrap;'> <TT_Content /> </div>

以下是代码的简化版本：

        Tooltip = Ractive.extend({
        template: "" +
            "<div id='rdt-tt' class='rdt-tt-transover' style='display: {{display}}; top: {{top}}; left: {{left}}; width:{{width}}; height:{{height}}; text-align: {{text_align}}; position:fixed;  white-space:nowrap;'> " +
            "<TT_Content /> "+
            "</div> ",
        append: true
    });

    TT_Content = Component.extend ({
   template :  "something here",
    append: true
});

tooltip = new Ractive({
    el: 'output',
    append: true,
    template: '<Tooltip />',
    components: {
        Tooltip : Tooltip,
        TT_Content : TT_Content
    }
});

这是我关于stackoverflow的第一个问题，如果我不尊重某些指导原则，我很乐意请求您的原谅和建议。

Answer 1

下划线_在组件标记名称中无效。请使用超量-代替。这是W3C custom element spec的一个点头，它实际上要求自定义元素进行宣传。

虽然不是必需的，但作为一种风格问题，使用小写来区分标记实例和通过Ractive.extend({...})调用创建的“类”定义并不是一个坏主意。如果组件仅由该组件使用，您也可以在其他组件上注册组件。

var Tooltip = Ractive.extend({
    template: <div style='...'><tooltip-content/></div>"
});

var TooltipContent = Component.extend ({
    template :  "something here",
});

var tooltip = new Ractive({
    el: 'output',
    append: true,
    template: '<tooltip/>',
    components: {
        tooltip : Tooltip,
        'tooltip-content' : TooltipContent
    }
});

在一个将在线上（在模板中）使用的组件上指定append: true也没有什么意义，因为它没有任何意义，将被忽略。

是否可以在一个组件的定义中嵌套组件？

1 个答案: