淘汰赛绑定是膨胀的 html（表格单元格），如何使用 javascript 创建绑定或从父元素绑定？

Question

我通过敲除创建了一个可重用的网格组件，我发现我的 html 变得非常臃肿，带有 data-bind="..." 字符串，特别是对于 <td> 元素。

我可以有一个包含 8 列和仅 20 行的网格，这将产生 160 个单元格。问题是我所有的细胞都是这样的：

<td data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText],
event: { dblclick: function() { $root.rowDoubleClicked($parent); } },
css: $data.columnClass">Yale University</td>

我什至可能会添加未来的绑定。

如果有一种方法可以将绑定应用到<tbody>，它会自动将绑定应用到它的子<td> 元素，那就太好了。或者也许有一种方法可以通过 javascript 而不是使用“data-bind”属性来应用绑定？

Answer 1

通常只有您（开发人员）才能查看代码，因此它的外观在总体规划中并不重要。您可以格式化您的标记以使其更易于理解：

<td data-bind="
    text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText],
    event: { dblclick: function() { $root.rowDoubleClicked($parent); } },
    css: $data.columnClass">Yale University</td>

可以通过将该检查推回视图模型来清理您的文本绑定，也许使用为您进行检查的计算。

剔除模板可能有助于“美化”您的标记，但无论如何它实际上只是在移动它。