knockoutjs 我可以将组件用作 table 行吗

Question

我想将组件用作 table 行模板，但似乎找不到方法，这可能吗？

当我执行以下操作时，它不会将组件放在 tbody 中，而是放在 table 上方。

组件

<table>
  <tbody>
     <reportingline params='name: "Phil"'></reportingline>
  </tbody>
</table>

模板

<tr>
    <td data-bind="text: col1"></td>
</tr>

Answer 1

恐怕看起来不太可能。来自 Polymer FAQ:

Until the addition of HTML <template>, certain elements like <select>, <table>, and others had special parser rules to prevent anything other than <option> and <tr> from being their children, respectively. Because of these legacy rules, browsers that don’t support <template> will lift unexpected elements out of context and make them siblings [..]

因此，将自定义元素视为 table 行的唯一方法（至少在某些现代浏览器中是这样）是使用 HTML <template> 标记，Knockout 组件不使用该标记使用。

根据 WHATWG HTML standard document <table> 允许的元素是

In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element (but there can only be one tfoot element child in total), optionally intermixed with one or more script-supporting elements.

("script-supporting elements" 是 <script> 和 <template>)

最好的解决方法可能是也创建您自己的自定义 <table> 标签，并通过 display: table 为其设置适当的样式。如果这样做，请考虑通过 grid.

等 ARIA 角色赋予它语义意义

Answer 2

使用虚拟组件绑定。这种方法允许您在没有包装器元素的情况下使用您的组件。

<table>
  <tbody>
    <!-- ko component: { name:"reportingline", params: { name: 'Phil' } } --><!-- /ko -->
  </tbody>
</table>

knockoutjs 我可以将组件用作 table 行吗

knockoutjs can I use a component as a table row

jquery

components

knockout.js