私はノックアウト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:この質問には正しく質問されていませんが、問題は解決されました。それは各ループのために何もしなくなったが、自分自身のフォームは繰り返しデータを作成する複数回バインドされていた
私はあなたが本当に良い答えや説明を得るために[mcve]でこれを複製できる必要があると思います。 –
'activitySubList'はどのように構成されているのか、どのように構成されているのか、何であるのかなどを表示します。 –
activitySubListはビジネス固有の情報でいっぱいです。実際には表示できませんが、 3つの要素で構成されたノックアウトの観測可能な配列ですが、ビジュアルスタジオのウォッチで見ることができますが、ループは3つだけレンダリングする必要があるときに9行をレンダリングします。 – Stizz1e