forma más sencilla de conseguir índice de elemento actual dentro de la plantilla jQuery

Question

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

$("#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 sencilla de mostrar índice de elemento en la plantilla? Preferiblemente sin utilizar funciones externas separadas, sin cambiar la estructura del objeto pasado, 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é a ticket proponiendo para exponer índice de matriz de elemento de la plantilla pero estaba cerrado como no válido ...

Answer 1

No hay indexar fácilmente accesible. Hay una clave que se agrega a cada elemento.

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

Esta clave es accesible a través de jquery. Entonces puede hacer algo como

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

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

Así que la respuesta a su pregunta es ..... Nº

Answer 2

Bueno, no es una función externa separada cierto, pero se puede dar una palmada una función en el objeto options se puede pasar a tmpl. He hecho la siguiente y funciona bien:

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

En la plantilla, se puede acceder a la función de la $item objeto:

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

Como alternativa, en lugar de pasar $item.data en la función, la El contexto de la función es el objeto tmplItem de la plantilla (igual que $ item.data). Por lo tanto, puede escribir dataArrayIndex como parámetro y acceder a los datos a través del this.data.

Answer 3

Acabo de toparme con este tema yo mismo. ¡Muy frustrante! El índice del elemento de la plantilla, por ejemplo, siempre estaba disponible en jTemplates. deberíamos haber sido difícil añadir que en yo creo ...

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

Pero cuando se trata de acceder a él desde una función que llamo desde el interior de la plantilla:

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

en la función Si puedo comprobar la propiedad clave de posición, ya sea como 'item.key' o '$ (punto) .key' consigo 'indefinido' y no el real valor...

Answer 4

Aquí un corte cheezy:

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

Answer 5

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

Patch que jquery.template y luego se puede hacer como esto:

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

Answer 6

Una forma sencilla de hacer esto usando jQuery 1.6. 4 o más nuevo al menos.

En primer lugar, como cabría esperar iterar a través de una colección

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

hará el truco!

Answer 7

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

Answer 8

simplemente definir una variable global para el conteo:

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