Come modellare le strutture If-Else nelle viste con associazione a dati?

Mi trovo costantemente a usare questo idioma nei modelli HTML basati su KO:

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

Esiste un modo migliore / più pulito per eseguire i condizionali in KO, o esiste un approccio migliore rispetto all'uso dei tradizionali costrutti if-else?

Inoltre, vorrei solo sottolineare che alcune versioni di Internet Explorer (IE 8/9) non analizzano correttamente l'esempio precedente. Si prega di consultare questa domanda SO per ulteriori informazioni. Il breve riepilogo è: non utilizzare commenti (associazioni virtuali) all'interno dei tag della tabella per supportare IE. Usa tbodyinvece:

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

Esistono un paio di modi diversi per gestire questo tipo di codice.

• con una combinazione if / ifnot come sei adesso. Funziona bene e non è particolarmente prolisso.

• Il binding switch / case di Michael Best ( https://github.com/mbest/knockout-switch-case ) è abbastanza flessibile e può consentirti di gestire facilmente questo e altri più complicati (più stati che vero / falso).

• Un'altra opzione è utilizzare modelli dinamici. Assoceresti un'area a uno o più modelli con il nome del modello utilizzato in base a un osservabile. Ecco un post che ho scritto su questo argomento qualche tempo fa: http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html . Nel tuo scenario, potrebbe apparire come:

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

La getCellTemplatefunzione potrebbe vivere ovunque, ma riceverebbe l'elemento ($ data) come primo argomento e restituirebbe il nome del modello da utilizzare.

Un approccio consiste nell'usare modelli denominati (che possono supportare il passaggio di argomenti):

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

Un'altra opzione è utilizzare il mio plug-in switch / case , che funzionerebbe in questo modo:

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

Per evitare il ricalcolo dell'associazione knockout quando si utilizza la combinazione di if: / ifnot: è possibile utilizzarli insieme alla costruzione 'with:'

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

Ora c'è anche il knockout-elsebinding / plugin (che ho scritto per risolvere questo problema).