[解決済み] データバインドビューで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氏のスイッチ/ケースバインディング( https://github.com/mbest/knockout-switch-case ) は非常に柔軟で、これともっと複雑なもの (真偽よりも多くの状態) を簡単に扱うことができます。

• もう一つの選択肢は、動的テンプレートを使用することです。 領域を1つまたは複数のテンプレートにバインドし、テンプレート名はobservableに基づき使用されることになります。 しばらく前にこのトピックについて書いた投稿があります。 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) を受け取り、使用するテンプレートの名前を返します。