Knockout.js 无容器“foreach"不使用 <table> [英] Knockout.js containerless "foreach" not working with <table>

问题描述

此代码抛出错误(在 Chrome 中):找不到匹配的结束注释标签:ko foreach: MyPlans":

This code throws the error (in Chrome): "Cannot find closing comment tag to match: ko foreach: MyPlans":

<table>
  <!-- ko foreach: MyPlans -->
    <tr>
      <td>Test</td>
    </tr>
  <!-- /ko -->
</table>

如果我改用列表，则一切正常:

If I use a list instead, everything works:

<ul>
  <!-- ko foreach: MyPlans -->
    <li>
      Test
    </li>
  <!-- /ko -->
</ul>

我想在一张桌子上使用无容器的 foreach.有什么我做错了吗?是bug吗?

I would like to use the containerless foreach with a table. Is there something I'm doing wrong? Is it a bug?

推荐答案

这与浏览器自动插入 tbody 标签有关，这会在注释中造成不匹配.渲染的输出将如下所示:

This is related to the fact that browsers insert tbody tags automatically, which creates a mismatch in the comments. The rendered output will look like:

<table>
  <!-- ko foreach: MyPlans -->
  <tbody>
    <tr>
      <td>Test</td>
    </tr>
  <!-- /ko -->
  </tbody>
</table>

Steve 确实做了一些工作来尝试更正 KO 中不匹配的标签，但对您来说，最简单的方法是自己添加 tbody 或添加 tbody 和把你的绑定放在上面.

Steve did put some work into trying to correct mismatched tags in KO, but the easiest thing for you to do is either add the tbody yourself or add the tbody and put your binding on it.

<table>
  <tbody data-bind="foreach: MyPlans">
    <tr>
      <td>Test</td>
    </tr>
  </tbody>
</table>

如果需要，一个表可以有多个 tbody 标签是合法的.

It is legal for a table to have multiple tbody tags, if necessary.

这篇关于Knockout.js 无容器“foreach"不使用 <table>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！