95

私は常に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>
4

4 に答える 4

64

このタイプのコードを処理するには、いくつかの方法があります。

  • あなたが今のように if/ifnot の組み合わせで。これはうまく機能し、それほど冗長ではありません。

  • Michael Best のスイッチ/ケース バインディング ( https://github.com/mbest/knockout-switch-case ) は非常に柔軟で、これとより複雑なもの (true/false よりも多くの状態) を簡単に処理できます。

  • もう 1 つのオプションは、動的テンプレートを使用することです。オブザーバブルに基づいて使用されるテンプレート名を使用して、領域を 1 つ以上のテンプレートにバインドします。しばらく前にこのトピックについて書いた投稿があります: http://www.knockmeout.net/2011/03/quick-tip-dynamically-ching.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) が最初の引数として与えられ、使用するテンプレートの名前が返されます。

于 2012-07-19T05:09:22.663 に答える
44

One approach is to use named templates (which can support passing arguments):

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

Another option is use my switch/case plugin, which would work like this:

<!-- 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-19T05:07:18.477 に答える
4

if: / ifnot: の組み合わせを使用するときにノックアウト バインディングの再計算を回避するには、'with:' 構造と組み合わせて使用​​できます。

    <!-- ko with: $data.DoSomePerformanceCriticalWork($data.SomeParameter()) -->
        <!-- ko if: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
        <!-- ko ifnot: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
    <!-- /ko -->
于 2014-08-12T14:36:15.620 に答える
2

knockout-elseバインディング/プラグイン (この問題に対処するために私が書いたもの)もあります。

于 2014-10-13T04:18:28.063 に答える