Можно ли вложить компоненты в определение одного компонента?

Question

Я хотел бы составить компоненты, определенные с библиотекой ractivejs. Я знаю, что могу сделать это в одном шаблоне, располагая их один рядом с другим. Например:

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

Но то, что я хочу сделать, это вложение компонентов, это что-то вроде

template : "<Component1 />"

и в определении Компонента1:

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

Это мой первый вопрос по stackru, я с удовольствием попрошу у вас прощения и совета, если я пренебрег некоторыми рекомендациями.

Answer 1

Подчеркивания _ недопустимы в именах тегов компонентов. Используйте гипс - вместо. Это дань спецификации пользовательского элемента W3C, которая на самом деле требует, чтобы пользовательские элементы имели перенос.

Хотя это и не обязательно, но для стиля неплохо использовать строчные буквы, чтобы отличать экземпляр тега от определения "Class", созданного с помощью 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 для компонента, который будет использоваться в строке (в шаблоне), так как он не имеет никакого значения и будет игнорироваться.