Knockout JS使用foreach绑定时所有值被最后一项覆盖问题咨询

问题根源 #

你将foreach: coaOperasional绑定在了<table>标签上，HTML规范中<table>内的多个<tbody>会被浏览器自动合并处理，Knockout的上下文绑定无法正确对应每一个coaOperasional数组项，最终所有绑定都会被数组最后一项的上下文覆盖，就出现了所有行都显示最后一个值的问题。

修复方案 #

修改HTML结构，将foreach: coaOperasional改为无容器绑定，包裹每一组对应的<tbody>，不需要改动原有样式结构即可解决问题：

改后HTML核心部分代码 #

<table class='table table-striped nowrap' style="width: 100%">
  <!-- ko foreach: coaOperasional -->
  <tbody>
    <tr>
      <td colspan="2" data-bind="visible: $parentContext.$index() == 0">
        <b><span data-bind="text: optype">Tipe</span></b>
      </td>
      <td><b>&nbsp;</b></td>
    </tr>
  </tbody>
  <tbody data-bind="foreach: detailOperasional">
    <tr>
      <td data-bind="text: codeop,visible: $parentContext.$parentContext.$index() == 0">### code ###</td>
      <td data-bind="html: coaop,visible: $parentContext.$parentContext.$index() == 0">### coa ###</td>
      <td data-bind="html: totalop">0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td data-bind="visible: $parentContext.$index() == 0"></td>
      <td data-bind="visible: $parentContext.$index() == 0"><b>JUMLAH <span data-bind="text: optype">Tipe</span></b></td>
      <td><b><span data-bind="text: optypetotal"></span></b></td>
    </tr>
  </tbody>
  <!-- /ko -->
</table>

补充说明 #

你现有逻辑里的$parentContext.$index() == 0判断是让只有第一个部门的列表展示code和coa列，如果需要所有部门都展示对应列，去掉该visible绑定即可。

内容的提问来源于stack exchange，提问作者Dewi Griselda