与淘汰赛“的foreach”通过多维数组循环工作(Working with Knockout 

我有一个多维关联数组。

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: [] }
]);

我们的目标是循环遍历这个数组并打印出只有那些“可见”设置为true值。

我已经使用了一堆，如果和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小提琴链接

Answer 1:

Underscore.js有一些不错的方法使用数组时，也许你可以使用扁平化和筛选 ，创建从一个结构数组，那么你可以只写一个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。

Answer 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>

Answer 3:

如果您在项目添加空儿阵列可以使用模板

的jsfiddle样本

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

文章来源: Working with Knockout 'foreach' looping through multidimensional array