如何在數據綁定視圖中模板If-Else結構？

我用這個成語基於KO-HTML模板，不斷髮現自己：如何在數據綁定視圖中模板If-Else結構？

<!-- 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瞭解更多信息。簡要總結是，不要在表標籤內部使用註釋（虛擬綁定）來支持IE。使用tbody來代替：

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

來源

2012-07-19 Jensen Ching

任何人在看這個可能希望跟蹤https://github.com/knockout/knockout/issues/962 – 2014-10-11 01:12:09

有幾種不同的方法可以處理這種類型的代碼。

與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功能，可以隨時隨地活着，但將給予項目（$數據）作爲第一個參數，將返回模板的名稱使用。

來源

2012-07-19 05:09:22

奇怪，我的HTML不會顯示出來。也只是注意到邁克爾給出了幾乎相同的答案。 – 2012-07-19 05:12:50

感謝您提供全面的選項列表。我想我的原始代碼風格適用於簡單的情況。當需要出現時，我會檢查其他選項。 – 2012-07-19 06:26:38

有沒有一種方法可以更多地定製模板，比如「template：data，proppertyName：'email'」，以及模板data-bind =「text：$ data [propertyName]」。 – 2014-04-05 11:04:54

一種方法是使用命名模板（可支持傳遞參數）：

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

來源

2012-07-19 05:07:18

謝謝。當需要出現時，我會記住開關/外殼插件。 – 2012-07-19 06:27:24

不錯的插件，你到了那裏！肯定會使用這一個。 – Kukks 2014-05-15 08:58:41

命名模板效果很好，它通過嵌套三元運算符來支持else if elseif類型的場景。 – Will 2014-11-07 19:16:27

爲了避免淘汰賽重新計算使用，如果組合時綁定：/如不方便：您可以結合「與：」使用這些建築

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

來源

2014-08-12 14:36:15

現在已經開始了knockout-else綁定/插件（我寫信解決這個問題）。

來源

2014-10-13 04:18:28

如何在數據綁定視圖中模板If-Else結構？

回答

相關問題