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

sentencia if

Question

Constantemente me encuentro usando este modismo en plantillas HTML basadas 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 forma mejor / más limpia de hacer condicionales en KO, o hay un mejor enfoque que el simple uso de constructos if-else tradicionales?

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

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

Answer 1

Ahora también existe el complemento / complemento knockout-else (que escribí para abordar este problema).

Answer 2

Hay dos maneras diferentes de manejar este tipo de código.

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

• El enlace / enlace de caso 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, podría verse así:

<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 podría vivir donde sea, pero se le daría el elemento ($ data) como primer argumento y devolvería el nombre de la plantilla a usar.

Answer 3

Para evitar el recálculo del enlace knockout al usar la combinación de if: / ifnot: puede usarlos junto con la construcción ''with:''

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

Answer 4

Un enfoque es usar plantillas con nombre (que pueden admitir argumentos de paso):

<!-- 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 utilizar mi https://github.com/mbest/knockout-switch-case , 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 -->