2017-08-30 4 views
0

私はノックアウトforeachループを使用してdivのセットをレンダリングしますが、ループはレンダリング前に各配列アイテムを3回(配列の長さ)レンダリングしています次の行ノックアウトForeachループレンダリングが多すぎます

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

要するにループは次の要素をレンダリングするために移動する前に(この場合は3回))(各要素にArray.lengthとレンダリングされる:

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

得られたマークアップは、このようになります。

EDIT:activitySubListは、3つの要素を持つko.observableArrayです。

編集2:この質問には正しく質問されていませんが、問題は解決されました。それは各ループのために何もしなくなったが、自分自身のフォームは繰り返しデータを作成する複数回バインドされていた

+3

私はあなたが本当に良い答えや説明を得るために[mcve]でこれを複製できる必要があると思います。 –

+0

'activitySubList'はどのように構成されているのか、どのように構成されているのか、何であるのかなどを表示します。 –

+0

activitySubListはビジネス固有の情報でいっぱいです。実際には表示できませんが、 3つの要素で構成されたノックアウトの観測可能な配列ですが、ビジュアルスタジオのウォッチで見ることができますが、ループは3つだけレンダリングする必要があるときに9行をレンダリングします。 – Stizz1e

答えて

0

あなたはデータバインディングのスケッチした実装を提供していない。 'activitySubList'があなたのvarだと仮定して、これを試してみましたか?

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

またはこの: < - KOますforeach:!activitySubList - > おそらくノックアウトのドキュメントを見てみる必要があります http://knockoutjs.com/documentation/foreach-binding.html – WiseGuy

関連する問題