La forma más sencilla de obtener el índice de elementos actual dentro de la plantilla jQuery

option selected jquery

Question

Estoy pasando una matriz de objetos a la plantilla jQuery (complemento oficial de jquery-tmpl ):

$("#itemTmpl").tmpl(items).appendTo("body");

<script id="itemTmpl" type="text/x-jquery-tmpl">
    <div class="item">Name: ${name}, Index: ${???}</div>
</script>

¿Cuál es la forma más fácil de mostrar el índice de elementos en la plantilla? Preferiblemente sin usar funciones externas separadas, sin cambiar la estructura de objeto pasada y sin cambiar la estructura de la plantilla (convirtiendo a {{each}} ). ¿Hay alguna variable incorporada que almacene el índice de matriz actual?

ACTUALIZACIÓN Creé un ticket proponiendo exponer el índice de matriz a un elemento de plantilla pero se cerró como no válido ...

Answer 1

Aquí hay un hack de cheezy:

${ _index === undefined && _index = 0, '''' }
<strong>Item ${ index }:</strong> ${ content }
${ _index++, '''' }

Answer 2

Bueno, no es una verdadera función externa separada, pero puede pegar una función en el objeto de options que puede pasar a tmpl . He hecho lo siguiente y funciona bien:

$("#templateToRender").tmpl(jsonData,
  {
    dataArrayIndex: function (item) {
      return $.inArray(item, jsonData);
    }
  });

En la plantilla, puede acceder a la función desde el $item :

<script id="templateToRender" type="text/x-jquery-tmpl">
  <li>
    Info # ${$item.dataArrayIndex($item.data)}
  </li>
</script>

Alternativamente, en lugar de pasar $item.data a la función, el contexto de la función es el objeto tmplItem de la plantilla (igual que $ item.data). Por lo tanto, podría escribir dataArrayIndex parámetros y acceder a los datos a través de this.data .

Answer 3

Crea una función en javascript para incrementar un contador. Luego cree una función en javascript para obtener la posición actual del contador. Estas funciones se pueden llamar usando {{ functionName() }} . En el pasado, he utilizado la función en un elemento html, por ejemplo, en una etiqueta de entrada oculta. Esto le permitirá utilizar un índice.

Answer 4

No hay un índice de fácil acceso. Hay una clave que se adjunta a cada elemento.

<div class="item" jQuery1287500528620="1">

Esta clave es accesible a través de jquery. Así que puedes hacer algo como

$(".item").each(function () {
                var theTemplate = $(this).tmplItem();
                $(this).append("Index: " + theTemplate.key);
            });

Pero eso no es lo que querías. No creo que lo que querías sea posible. El objeto $ {$ item} se supone que representa el método tmplItem (), pero no proporciona un valor para ${$item.key}. El uso de ${$.tmplItem().key} produce 0 para cada fila.

Entonces la respuesta a tu pregunta es no.

Answer 5

Sólo me encontré con este problema yo mismo. ¡Muy frustrante! El índice del elemento de plantilla, por ejemplo, siempre estuvo disponible en jTemplates. No debería haber sido difícil agregar que en ...

Lo extraño es que en Firebug puedo ver la propiedad clave para cada artículo $:

Pero cuando intento acceder desde una función a la que llamo desde la plantilla:

<img class="profImage" src="${getProfileImage($item)}" />

En la función si verifico la propiedad de la clave del elemento como ''item.key'' o ''$ (item) .key'', obtengo ''undefined'' y no el valor real ...

Answer 6

Una forma sencilla de hacerlo utilizando jQuery 1.6.4 o más reciente, al menos.

Primero como se esperaría iterar a través de una colección.

{{each myListofStuff}}
Index: ${$this.index}
{{/each}}

Hará el truco!

Answer 7

simplemente defina una variable global para contar:

var n = 0;
function outputTemplate(){
    return $( "#template_item" ).tmpl(datas,
          {
              getEvenOrOdd: function(){
                  return ++n % 2 == 0 ? ''odd'' : ''even'';
              }
          } 
    );
}

Answer 8

https://github.com/clarkbox/jquery-tmpl/commit/993e6fa128c5991723316032abe12ff0cbbb9805

Parche tu jquery.template y luego puedes hacer esto:

<script id=”tabTemplate” type=”text/x-jquery-tmpl”>
    <div id=“tab-${$index + 1}”>
        <!— render tab contents here… —>
    </div>
</script>