如何模拟数据绑定视图中的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)没有正确解析上面的例子.有关更多信息,请参阅此SO问题.快速摘要是,不要在表标记内使用注释(虚拟绑定)来支持IE.使用tbody代替:

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

Answer 1

您可以通过几种不同的方式处理此类代码.

• 像你现在这样的if/ifnot组合.这很好用,并不是非常冗长.

• Michael Best的开关/大小写绑定(https://github.com/mbest/knockout-switch-case)非常灵活,可以让你轻松处理这个和更复杂的(更多状态而不是真/假).

• 另一种选择是使用动态模板.您可以使用基于可观察对象的模板名称将区域绑定到一个或多个模板.这是我前一段时间写的关于这个主题的帖子: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)作为第一个参数,并返回要使用的模板的名称.

Answer 2

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

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