binding - knockout.js 递归绑定(bind)

Question

我正在尝试使用 knockout 进行一些复杂的绑定(bind)(至少对于像我这样的新手来说)。

考虑以下数据:

var originalData = {
id: 1,
name: "Main",
children: [ { id: 2, name: "bob", children: []}, { id: 3, name: "ted", children: [{id: 5, name:"albert"}, {id: 9, name: "fred"}]} ],
selectedChild:  { id: 2, name: "bob" }
};

<table>
<tr>
    <td data-bind="text: name"></td>
</tr>
<tr data-bind="if: children().length > 0">
    <td>
        <select data-bind="options: children,
            optionsText: function(item){
                return item.name;
                    }, 
            optionsCaption: 'Choose...'"></select>       
    </td>
</tr>

好的，这是最简单的部分。

困难的部分是，每当在列表中选择一个项目时，如果该项目有子项目，那么下面应该出现一个新的选择框。其数据源将是第一个选择框中所选项目的子项。当然，它可以继续任何深度。

我应该如何通过 knockout 解决这个问题？

我已经整理了 jsfiddle 上迄今为止所拥有的示例:http://jsfiddle.net/graphicsxp/qXZjM/

Answer 1

您可以通过将模板放入 script 标记中来在 knockout 中使用递归模板。 script 标记中的模板可以引用自身，如下所示:

<div data-bind="template: 'personTemplate'"></div>

<script type="text/ko" id="personTemplate">
    <span data-bind="text: name"></span>
    <select data-bind="options: children, optionsText: 'name', optionsCaption: 'Choose',  value: selectedChild"></select>
    <!-- ko if: selectedChild -->
    <div data-bind="template: { name: 'personTemplate', data: selectedChild }"></div>
    <!-- /ko -->
</script>

这是the fiddle

<小时/>

更新:

您可以使用计算轻松执行此操作，并从 View 中删除逻辑(我认为在本例中更好)，然后绑定(bind)if到它。

self.showChildren = ko.computed(function() {
    return self.selectedChild()
        && self.selectedChild().children().length > 0;
});

如果您想将两者都放在 if block 中，则可以，只需包含括号即可。原因是可观察量是函数；如果您只使用单个引用，knockout 可以让您排除它们，但它们需要“深入了解”它们的属性。

if: selectedChild() && selectedChild().children().length > 0

这是updated fiddle