javascript - 如何在数据绑定(bind) View 中模板化 If-Else 结构？

Question

我经常发现自己在基于 KO 的 HTML 模板中使用这个习语:

<!-- ko if: isEdit -->
<td><input type="text" name="email" data-bind="value: email" /></td>
<!-- /ko -->
<!-- ko ifnot: isEdit -->
<td data-bind="text: email"></td>
<!-- /ko -->

是否有更好/更简洁的方法来在 KO 中执行条件语句，或者是否有比仅使用传统的 if-else 结构更好的方法？

此外，我只想指出某些版本的 Internet Explorer (IE 8/9) 无法正确解析上述示例。请看this SO question了解更多信息。快速总结是，不要在表格标签内使用注释(虚拟绑定(bind))来支持 IE。使用 tbody 代替:

<tbody data-bind="if: display"><tr><td>hello</td></tr></tbody>

Answer 1

有几种不同的方法可以处理这种类型的代码。

• 像您现在这样使用 if/ifnot 组合。这工作正常并且不是非常冗长。

• Michael Best 的 switch/case 绑定(bind) ( https://github.com/mbest/knockout-switch-case ) 非常灵活，可以让您轻松处理这种情况和更复杂的情况(状态多于 true/false)。

• 另一种选择是使用动态模板。您可以将一个区域绑定(bind)到一个或多个模板，并根据可观察对象使用模板名称。这是我不久前就此主题写的一篇文章:http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html .在您的场景中，它可能看起来像:

<td data-bind="template: $root.getCellTemplate"></td>

<script id="cellEditTmpl" type="text/html">
    <input type="text" name="email" data-bind="value: email" />
</script>

<script id="cellTmpl" type="text/html">
    <span data-bind="text: email"></span>
</script>

getCellTemplate 函数可以存在于任何地方，但会将项目($data)作为第一个参数并返回要使用的模板的名称。