Можно ли иметь вложенные компоненты нокаута в JavaScript

Question

Я хочу что-то вроде этого:

<base-component> 
    <sec-component> 
    </sec-component> 
</base-component> 

Можно ли добиться этого с помощью компонентов нокаута?

Answer 1

Да. В документации, «Передача разметки на компоненты» раздела: http://knockoutjs.com/documentation/component-custom-elements.html#passing-markup-into-components

<!-- This could be in a separate file --> 
<template id="my-special-list-template"> 
    <h3>Here is a special list</h3> 

    <ul data-bind="foreach: { data: myItems, as: 'myItem' }"> 
     <li> 
      <h4>Here is another one of my special items</h4> 
      <!-- ko template: { nodes: $componentTemplateNodes, data: myItem } --><!-- /ko --> 
     </li> 
    </ul> 
</template> 

<my-special-list params="items: someArrayOfPeople"> 
    <!-- Look, I'm putting markup inside a custom element --> 
    The person <em data-bind="text: name"></em> 
    is <em data-bind="text: age"></em> years old. 
</my-special-list> 

В ko template внутри li элемента, будут добавлены узлы.

Таким образом, вы также можете ввести другой компонент во внутренней разметке. Например:

<!-- This could be in a separate file --> 
<template id="my-special-list-template"> 
    <h3>Here is a special list</h3> 

    <ul data-bind="foreach: { data: myItems, as: 'myItem' }"> 
     <li> 
      <h4>Here is another one of my special items</h4> 
      <!-- ko template: { nodes: $componentTemplateNodes, data: myItem } --><!-- /ko --> 
     </li> 
    </ul> 
</template> 

<template id="my-person-template"> 
    The person <em data-bind="text: name"></em> 
    is <em data-bind="text: age"></em> years old. 
</template> 

<my-special-list params="items: someArrayOfPeople"> 
    <my-person></my-person> 
</my-special-list>