如何在数据绑定视图中模板化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 (IE8/9)不能正确解析上面的示例。请查看this SO question了解更多信息。简单的总结是，不要在表标签中使用注释(虚拟绑定)来支持IE。请改用tbody：

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

Answer 1

一种方法是使用命名模板(可以支持传递参数)：

<!-- ko template: isEdit() ? 'emailEdit' : 'emailDisplay' --><!-- /ko -->
<script id="emailEdit" type="text/html">
    <td><input type="text" name="email" data-bind="value: email" /></td>
</script>
<script id="emailDisplay" type="text/html">
    <td data-bind="text: email"></td>
</script>

另一种选择是使用我的switch/case plugin，它的工作方式如下：

<!-- ko switch -->
    <!-- ko case: isEdit -->
        <td><input type="text" name="email" data-bind="value: email" /></td>
    <!-- /ko -->
    <!-- ko case: $else -->
        <td data-bind="text: email"></td>
    <!-- /ko -->
<!-- /ko -->

Answer 2

为了避免在组合使用if: / ifnot:时重新计算敲除绑定，您可以将它们与“with：”结构结合使用

    <!-- ko with: $data.DoSomePerformanceCriticalWork($data.SomeParameter()) -->
        <!-- ko if: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
        <!-- ko ifnot: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
    <!-- /ko -->

Answer 3

现在还有knockout-else绑定/插件(我写这个插件是为了解决这个问题)。