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

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
    }
});

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

Answer 1

下划线 _ 在组件标记名称中无效。请改用连字符 -。这是对 W3C custom element spec 的一种认可，它实际上需要自定义元素有一个连字符。

虽然不是必需的，但就风格而言，使用小写字母来区分标签 instance 与通过 [ 创建的 "Class" 定义并不是一个坏主意=13=]打电话。如果仅由该组件使用，您还可以在其他组件上注册组件。

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 也不是很有意义，因为它没有任何意义，将被忽略。

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

Is it possible to nest components in the definition of one component?

ractivejs