[Javascript] 如何在數據綁定視圖中模板If-Else結構?


Answers

一種方法是使用命名模板(它可以支持傳遞參數):

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

另一種選擇是使用我的https://github.com/mbest/knockout-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 -->
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>



現在還有knockout-else binding / plugin(我寫的是為了解決這個問題)。




Links