Question

我想将一个组件用作表格行模板，但似乎无法找到方法，这可能吗？

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

组件

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

模板

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

Answer 1

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

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

Answer 2

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

在添加HTML <template>之前，<select>，<table>等其他元素都有特殊的解析器规则，以防止除<option>和{{1}之外的任何内容分别是他们的孩子。由于这些遗留规则，不支持<tr>的浏览器会将意外元素脱离上下文并使其成为兄弟姐妹[...]

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

根据WHATWG HTML standard document，<template>内的允许元素是

按此顺序：可选择<table>元素，后跟零个或多个caption元素，后跟可选的colgroup元素，后跟可选的thead元素，接着是零个或多个tfoot元素或一个或多个tbody元素，后跟可选的tr元素（但总共只有一个tfoot元素子元素），可选地与一个或多个脚本支持元素混合。

（＆＃34;脚本支持元素＆＃34; 为tfoot和<script>）

最佳解决方法可能是制作您自己的自定义<template>代码，并通过<table>为其提供合适的样式。如果您这样做，请考虑通过ARIA角色（例如grid）赋予其语义含义。

knockoutjs我可以使用一个组件作为表格行

2 个答案: