knockout:foreach 和 table 列插入额外的 TR

Question

一个jsfiddle说明了问题。我想使用 knockout:foreach 为 table 生成列 header 的列表（<th> 标签）。但是，如果您检查 DOM，您可以看到每个 <th> 周围插入了一个 <tr>，这会导致列标题全部堆叠在最左边的列上方，而不是显示一列header 在相应的 table 单元格上方。

我想也许 containerless syntax would be my friend, but here I am trying it in another jsfiddle 但它不起作用；如果您打开 javascript 控制台，您将看到无法找到关闭 foreach 循环的注释（关于此特定问题还有其他 SO 问题，但他们的解决方案对我不起作用）。

Answer 1

您需要将 TH 元素包装在单个 TR 中，而不是让浏览器猜测将它们放在哪里。

<thead>
  <tr data-bind="foreach:columns">
    <th data-bind="text: $data.field_name"></th>
  </tr>
</thead>

knockout:foreach 和 table 列插入额外的 TR

knockout:foreach with table columns inserts extra TR

javascript

knockout.js

javascript-databinding