【发布时间】：2017-08-30 16:03:33
【问题描述】：
我正在使用淘汰赛 foreach 循环来渲染一组 div，该循环可以工作，但是它会在渲染下一行之前将每个数组项渲染三次（这是数组的长度）。
<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：我意识到这个问题并没有真正正确地提出，但问题已经解决。它最终与 for each 循环没有任何关系，但它自身的表单被多次绑定创建重复数据
【问题讨论】：
-
我认为您确实需要能够在minimal reproducible example 中复制此内容以获得好的答案或解释。
-
显示
activitySubList是什么......它是如何构建的，它是如何填充的，它是什么等等。 -
由于 activitySubList 充满了业务特定信息，我无法真正展示它，但正如我在编辑中所述，它是一个包含三个元素的淘汰赛可观察数组，我可以说是通过在 Visual Studio 手表中查看它来工作，但是当它应该只渲染三行时，循环渲染了九行
-
您不需要在此处显示所有秘密，但如果您不能/不会显示您如何创建或绑定数据，则对您没有任何帮助。您可以使用虚构的名称和虚假数据创建对象，以显示您正在尝试如何做，否则这里的人不会读心。
-
如果您为此问题提供
fiddle，那就太好了。
标签： javascript html knockout.js