使用Knockout'foreach'循環多維數組

我有一個多維關聯數組。使用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: [] } 
]);

目標是循環訪問該數組，並僅打印出'可查看'設置爲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

來源

2013-04-04 dmathisen

你是否有適當的接受性研究？例如。這些項目在每個級別上看起來都一樣？在你的示例中，一些'children'缺少如下所示：'{name：「name1-1」，viewable：true}，'這是一個需求嗎？ – nemesv 2013-04-04 15:19:34

哦，這是一個錯字。我可以控制這一點，所以我認爲最好包括'孩子'，即使它是空的。我編輯了我的代碼並將孩子添加到所有項目中。所以，是的，所有的項目在各個層面上看起來都是一樣的。 – dmathisen 2013-04-04 15:23:49

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.

來源

2013-04-04 15:26:02 nemesv

擊敗我36秒:) – 2013-04-04 15:27:25

對不起克里斯，nemesv有點快 - 我得給他接受的答案。非常感謝幫助傢伙！這使生活變得更容易。 – dmathisen 2013-04-04 15:42:24

@dmathisen：當然。沒問題。事情就是這樣。 – 2013-04-04 16:26:47

你需要的是一個模板：

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

來源

2013-04-04 15:26:38

如果在項目添加空兒陣列可以使用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>

來源

2013-04-04 15:30:00 Damien

使用Knockout'foreach'循環多維數組

回答

相關問題