使用 Knockout 'foreach' 循环遍历多维数组答案

【问题标题】：Working with Knockout 'foreach' looping through multidimensional array使用 Knockout 'foreach' 循环遍历多维数组
【发布时间】：2013-03-26 17:28:03
【问题描述】：

我有一个多维关联数组。

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

【问题讨论】：

你有适当的递归结构吗？例如。每个级别的项目看起来都一样吗？在您的示例中，缺少一些 children，例如：{ name: "name1-1", viewable: true}, 这是一个要求吗？
哦，打错字了。我可以控制它，所以我认为最好包括“孩子”，即使它是空的。我编辑了我的代码并将子项添加到所有项目中。所以，是的，所有项目在所有级别上看起来都一样。

标签： javascript arrays multidimensional-array knockout.js

【解决方案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.

【讨论】：

对不起，克里斯，nemesv 有点快——我得给他接受的答案。非常感谢各位的帮助！这让生活更轻松。

【解决方案2】：

你需要的是一个模板：

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

然后就是：

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

【讨论】：

【解决方案3】：

如果您在项目上添加空子数组，您可以使用template

JSFiddle sample

<ul data-bind="foreach: items">
    <idv data-bind="template: {name: 'mytemp'}" />
</ul>
<div data-bind="stopBinding:true">
    <div id="mytemp">
        <div data-bind="visible :viewable">
            <li data-bind="text: name"></li>
            <div data-bind="foreach: children">
                <div data-bind="template: {name: 'mytemp'}" /></div>
        </div>
    </div>
</div>

【讨论】：