Is it possible to have nested knockout components in javascript

Question

I want something like this:

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

Is it possible to achieve this with the help of knockout components?

Answer 1

Yes. In the documentation, "Passing markup into components" section: 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>

In the ko template inside the li element, the nodes will be added.

Therefore, you can also insert a different component in the inner markup. For example:

<!-- 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>