Knockout 绑定正在膨胀 html（table 单元格），如何使用 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>

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

Knockout 模板可能有助于 "pretty up" 您的标记，但它实际上只是四处移动而已。

Knockout 绑定正在膨胀 html（table 单元格），如何使用 javascript 创建绑定或从父元素绑定？

Knockout binding is bloating html (table cells), how to create bindings with javascript or bind from parent element?

html

javascript

asp.net-mvc

knockout.js