如何在数据绑定视图中对If-Else结构进行模板化？

我经常发现自己在基于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）无法正确解析上述示例。请参阅此SO问题以获取更多信息。快速总结是，不要在表格标签内使用注释（虚拟绑定）来支持IE。使用tbody代替：

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

您可以通过几种不同的方式来处理这种类型的代码。

• 和现在一样使用if / ifnot组合。这很好用，并且不是很冗长。

• Michael Best的switch / case绑定（https://github.com/mbest/knockout-switch-case）非常灵活，可以让您轻松处理此问题和更复杂的问题（比true / false的状态更多）。

• 另一种选择是使用动态模板。您将根据一个可观察对象将一个区域绑定到一个或多个模板，并使用模板名称。这是我一段时间前就此主题撰写的帖子：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）作为第一个参数，并将返回要使用的模板的名称。

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

<!-- 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插件，它将像这样工作：

<!-- 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 -->

为了避免在结合使用if：/ ifnot：的组合时重新计算敲除结合，可以将它们与'with：'结合使用

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

现在还有knockout-else绑定/插件（我为解决这个问题而写的）。