淘汰多个数组绑定到具有行跨度的表答案

【问题标题】：knockout multiple arrays bind to table with rowspan淘汰多个数组绑定到具有行跨度的表
【发布时间】：2015-06-03 11:07:01
【问题描述】：

请参考这个html，我使用knockoutjs生成报告。
请参阅 **(1) 和 **(2) 位置
如果我删除 **(1) 并保留 **(2) 位置 tr，这可以正常工作，但我的报告格式没有达到我的预期。
如果我删除 **(2) 并保留 **(1) 我收到错误消息“找不到要匹配的结束评论标签：ko foreach: ProvinceArrayDTO” 但我需要的是第二个选项并填充数组。

有没有办法做到这一点？

在 JSFiddle Good Format STATIC DATA

Bad Format Dynamic from JSON

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>CEB Province</th>
      <th>CEB Area Office</th>
      <th>Primary Substation</th>
      <th>Meter</th>
      <th>Time Of Use</th>
      <th>Energy Initial Reading</th>
      <th>Energy Final Reading</th>
      <th>Total Energy in Time interval</th>
      <th>Total Energy</th>
      <th>Coincident Peak</th>
      <th>Remarks</th>
    </tr>
  </thead>
  <tbody>
    <!-- ko foreach: ProvinceArrayDTO -->
    <tr>
      <td data-bind="text: ProvinceName, attr: {rowspan: RowCount }"></td>
      <!-- ko foreach: AreaArrayDTO -->
      <td data-bind="text: AreaName, attr: {rowspan: RowCount }"></td>
      <!-- ko foreach: SubStationArrayDTO -->
      <td data-bind="text: SubStaionName, attr: {rowspan: RowCount }"></td>
      <!-- ko foreach: MetersArrayDTO -->
      <td data-bind="text: MeterName, attr: {rowspan: RowCount }"></td>
      <!-- ko foreach: MetersReadingArrayDTO -->
      <td class="auto-style5">Day</td>
      <td class="auto-style7">LastMnValue</td>
      <td class="auto-style2" data-bind="text: DayValue"></td>
      <td class="auto-style2">difference</td>


      <td class="auto-style4" rowspan="3">total</td>
      <td rowspan="3" data-bind="text: CoincidentPeak"></td>
      <td rowspan="3" data-bind="text: Remarks"></td>

    </tr>**(1)

    <td class="auto-style5">Peek</td>
    <td class="auto-style7">9804328</td>
    <td class="auto-style2">9523478</td>
    <td class="auto-style2">280,850</td>





    <!-- /ko -->
    <!-- /ko -->
    <!-- /ko -->
    <!-- /ko -->
    </tr>**(2)
    <!-- /ko -->


  </tbody>
</table>

【问题讨论】：

您不能使用</tr> 关闭标签。 Knockout 不会通过连接字符串来构建 dom，它会将它们解析为模板对象。当您执行此操作时，它无法理解未关闭的标签并创建模板。
谢谢提尔修斯。但就我而言，正如您所看到的，在数组中存在嵌套数组。即使在模板中也是如此。无论如何，我在淘汰赛中使用 html 绑定得到了我的结果，如下所述。

标签： javascript html knockout.js knockout-2.0

【解决方案1】：

感谢您的意见！

我已经通过 javascript 生成了总表布局，并使用了 knockout 的 html 绑定。

淘汰赛

self.DetailedReport = ko.observable();

function GenerateHtmlTableFronJson(){
  //JSON parse here ang generate HTML  
  return ("<table> ..... </table>");
  }

self.DetailedReport (GenerateHtmlTableFronJson());

在 HTML 中

&lt;div data-bind="html: DetailedReport"&gt;&lt;/div&gt;

【讨论】：