javascript - 使用 Knockout 'foreach' 循环遍历多维数组

Question

我有一个多维关联数组。

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 Fiddle link

Answer 1

Underscore.js有一些处理数组的好方法也许你可以使用 flatten和 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>

演示 JSFiddle.