使用 Knockout 'foreach' 循环多维数组

我有一个多维关联数组。

this.items = ko.observableArray([
    { name: "name1", viewable: true, children: [
        { name: "name1-1", viewable: true, children: []},
        { name: "name1-2", viewable: false, children: []}
    ] },
    { name: "name2", viewable: false, children: [] },
    { name: "name3", viewable: true, children: [
        { name: "name3-1", viewable: true, children: []},
    ] },
        { name: "name4", viewable: true, children: [] }
]);

目标是循环遍历该数组并仅打印“viewable”设置为 true 的值。

我使用一堆 if 和 foreach 语句来完成这项工作，但代码开始失控。这个例子只涵盖了 2 个级别，购买我的阵列可以达到5层深，所以这段代码会成倍增加并变得丑陋真快.

<ul data-bind="foreach: items">
    <!-- ko if: viewable -->
    <li data-bind="text: name"></li>
        <!-- ko foreach: children -->
            <!-- ko if: viewable -->
            <li data-bind="text: name"></li>
            <!-- /ko -->
        <!-- /ko -->
    <!-- /ko -->
</ul>

那么有没有一种更简单/更好的方法来循环整个数组呢？

JS 小提琴链接

下划线.js有一些处理数组的好方法也许你可以使用flatten and filter要从您的结构创建一个数组，那么您只需编写一个foreach:

或者您可以使用模板来封装您的if: viewable逻辑并递归应用模板：

<script type="text/html" id="template">
  <!-- ko if: viewable -->
    <li data-bind="text: name"></li>    
        <!-- ko template: { name: 'template', foreach: $data.children } -->
        <!-- /ko -->    
  <!-- /ko -->
</script>

<ul data-bind="template: { name: 'template', foreach: items } ">
</ul>

Demo JSFiddle。