Veriye bağlı görünümlerde If-Else yapıları nasıl şablonlanır?

Kendimi sürekli olarak KO tabanlı HTML şablonlarında şu deyimi kullanırken buluyorum:

<!-- 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'da koşullu yapmanın daha iyi / daha temiz bir yolu var mı, yoksa sadece geleneksel eğer-değilse yapılarını kullanmaktan daha iyi bir yaklaşım var mı?

Ayrıca, Internet Explorer'ın (IE 8/9) bazı sürümlerinin yukarıdaki örneği doğru şekilde çözümlemediğini belirtmek isterim. Daha fazla bilgi için lütfen bu SO sorusuna bakın . Hızlı özet, IE'yi desteklemek için tablo etiketlerinin içinde yorumları (sanal bağlamalar) kullanmayın. Kullanım tbodyyerine:

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

Bu tür bir kodu kullanmanın birkaç farklı yolu vardır.

• şimdi olduğu gibi bir if / ifnot kombinasyonu ile. Bu iyi çalışıyor ve aşırı derecede ayrıntılı değil.

• Michael Best'in anahtar / durum bağlama ( https://github.com/mbest/knockout-switch-case ) oldukça esnektir ve bunu ve daha karmaşık olanları (doğru / yanlıştan daha fazla durum) kolayca yönetmenize izin verebilir.

• Diğer bir seçenek de dinamik şablonlar kullanmaktır. Bir alanı bir veya daha fazla şablona, ​​bir gözlemlenebilirliğe dayalı olarak kullanılan şablon adı ile bağlarsınız. İşte bu konu hakkında bir süre önce yazdığım bir gönderi: http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html . Senaryonuzda şöyle görünebilir:

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

getCellTemplateFonksiyon her yerde yaşayabilir, ancak ilk argüman olarak öğe ($ data) verilecek ve kullanımına şablonun adını döndürecektir.

Bir yaklaşım, adlandırılmış şablonlar kullanmaktır (bu, argümanların iletilmesini destekleyebilir):

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

Diğer bir seçenek de benim anahtar / durum eklentimi kullanmaktır , bu da şu şekilde çalışır:

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

İf: / ifnot kombinasyonunu kullanırken nakavt bağlamanın yeniden hesaplanmasını önlemek için: bunları 'with:' yapısıyla birlikte kullanabilirsiniz

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

Şimdi de knockout-elsebağlama / eklenti var (bu sorunu çözmek için yazdığım).