Cómo plantillas de estructuras If-Else en vistas enlazadas a datos?

Question

constantemente me encuentro utilizando este idioma en las plantillas HTML basado en 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 --> 

¿Existe una manera mejor/más limpio que hacer condicionales en KO, o hay una mejor enfoque que simplemente usar tradicional construcciones if-else?

Además, me gustaría señalar que algunas versiones de Internet Explorer (IE 8/9) no analizan correctamente el ejemplo anterior. Por favor, consulte this SO question para obtener más información. El resumen rápido es, no use comentarios (enlaces virtuales) dentro de etiquetas de tabla para soportar IE. Usar la tbody lugar:

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

Answer 1

Existen dos formas diferentes de manejar este tipo de código.

• con una combinación if/ifnot como usted ahora. Esto funciona bien y no es terriblemente detallado.

• El encuadernado del conmutador/caja de Michael Best (https://github.com/mbest/knockout-switch-case) es bastante flexible y puede permitirle manejar fácilmente esto y otros más complicados (más estados que verdadero/falso).

• Otra opción es usar plantillas dinámicas. Debería vincular un área a una o más plantillas con el nombre de la plantilla que se utiliza en función de un elemento observable. Aquí hay una publicación que escribí sobre este tema hace un tiempo: http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html. En su escenario, que podría ser:

<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 función getCellTemplate podía vivir donde quiera, pero se le daría el elemento (datos $) como primer argumento y devolvería el nombre de la plantilla a utilizar .

Answer 2

Un método consiste en utilizar las plantillas con nombre (que puede soportar pasar argumentos):

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

Otra opción es usar mi switch/case plugin, que funcionaría así:

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

Answer 3

Para evitar un nuevo cálculo del nocaut vinculante cuando se utiliza la combinación de si:/ifnot: se puede usar en conjunción con 'con:' construcción

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

Answer 4

En la actualidad existe también la knockout-else unión/plugin (que yo escribió para abordar este problema).