jquery-templates - recorrer - selectores de elementos jquery

¿Cómo usar foreach con un primer elemento especial?

Question

Si tengo una matriz observable

foos = [{ name: "a" }, { name: "b" }, { name: "c" }]

En mi viewmodel, me gustaría hacer lo siguiente:

<ul>
  <li class="add-new-foo">Special stuff here</li>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Me puse bastante cerca de

<ul data-bind="template: { name: ''foo-template'', foreach: foos }">
  <li class="add-new-foo">Special stuff here</li>
</ul>

<script id="foo-template" type="text/html">
  <li data-bind="text: name"></li>
</script>

Pero esto terminó poniendo el .add-new-foo después de a, b, c.

¿Algunas ideas? En mi caso, es crucial usar Knockout foreach lugar de las plantillas de {{each}} de jQuery, debido a los beneficios mencionados en los documentos de Knockout .

Answer 1

Como actualmente no hay una manera de decirle a la plantilla de enlace dónde debe renderizar la plantilla, no veo una forma más limpia de hacerlo ahora que no sea algo como:

<ul data-bind="template: { name: ''foo-template'', foreach: foos, templateOptions: { first: foos()[0]} }">
</ul>

<script id="foo-template" type="text/html">
    {{if $item.first === $data}}
    <li class="add-new-foo">Special stuff here</li>
    {{/if}}
    <li data-bind="text: name"></li>
</script>

Por lo tanto, estamos pasando el primer elemento de su matriz como templateOptions y comprobando si el elemento con el que estamos tratando en la plantilla es realmente el primero.

Muestra aquí: http://jsfiddle.net/rniemeyer/XuXcr/

También se agregaron templateOptions después de 1.12 KO, por lo que necesitaría el código current . Más información sobre templateOptions here .

Espero que esto ayude.

Answer 2

Esta:

<ul>
    <li>Static item</li>
    <!-- ko foreach: products -->
        <li data-bind="text: name"></li>
    <!-- /ko -->
</ul>

no funcionará en IE8. Me inclino hacia la respuesta de la plantilla para esa situación. ¿Alguna otra idea?

EDIT: esto es lo que funcionó en IE8 - Eliminación de 2.2.1: usando los enlaces de opciones según la parte inferior del siguiente comentario:

https://.com/a/16361750

Answer 3

Parece que va a ser posible con el nuevo flujo de control sin contenedor y para cada enlace en KO 1.3 2.0:

<ul>
    <li>Static item</li>
    <!-- ko foreach: products -->
        <li data-bind="text: name"></li>
    <!-- /ko -->
</ul>

Consulte esta publicación para obtener más información: http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/

Answer 4

<!-- ko if: $index() == 0 -->
your code
<!-- /ko -->