knockout.js - 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>