Knockout Foreach循環渲染太多元素

我正在使用敲除foreach循環來渲染一組div，循環工作但是它呈現每個數組項目之前（這是數組的長度）渲染下一行。Knockout Foreach循環渲染太多元素

<div data-bind="foreach: { data: activitySubList } "> 
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div> 
    </div> 
</div>

所得的標記看起來像這樣：

<div data-bind="foreach: { data: activitySubList, includeDestroyed: false }"> 
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow0"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow0"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow0"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix odd" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow1"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix odd" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow1"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix odd" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow1"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow2"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>       
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow2"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div>        
    <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow2"> 
     <div class="rowCell editCell"><a href="#">Edit</a></div>         
    </div> 
</div>

在短環路移動以使下一個元素之前呈現每個元件的array.length（）（在這種情況下3次）。

編輯：activitySubList是一個有3個元素的ko.observableArray。編輯2：我意識到這個問題並沒有被真正問到，但問題解決了。它最終沒有任何與每個循環有關的事情，但它自己的形式多次綁定創建重複的數據

來源

2017-08-30 Stizz1e

我覺得你真的需要能夠在[mcve]中複製這個以獲得一個很好的答案或解釋。 –

顯示「activitySubList」是什麼......它是如何構建的，它是如何填充的，它是什麼等等。 –

作爲activitySubList充滿了特定於業務的信息，我無法真正顯示它，但正如我在編輯中所述是一個淘汰賽觀察數組，填充三個元素，我可以告訴它通過查看它在視覺工作室手錶工作，但循環渲染九行時，它應該只渲染三個 – Stizz1e

你沒有提供你的數據綁定的草圖實現，因爲其他人已經評論。假設'activitySubList'是你的var，你試過了嗎？

<div data-bind="foreach: activitySubList">

來源

2017-08-30 17:03:43 jonach

或者這樣： < - KO的foreach：activitySubList - > 或許應該看看淘汰賽文檔 http://knockoutjs.com/documentation/foreach-binding.html – WiseGuy

Knockout Foreach循環渲染太多元素

回答

相關問題