più semplice modo per ottenere l'indice dell'elemento corrente all'interno di jQuery modello

Question

sto passando un array di oggetti al modello di jQuery (jquery-tmpl plugin ufficiale):

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

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

Qual è il modo più semplice per visualizzare indice della voce nel modello? Preferibilmente senza utilizzare funzioni esterne separate, senza modificare la struttura dell'oggetto passata e senza modificare la struttura del modello (conversione in {{each}}). Esiste una variabile incorporata forse che memorizza l'indice dell'array attuale?

UPDATE ho creato a ticket propone di esporre indice di array di elemento del modello ma era chiuso come non valido ...

Answer 1

Non v'è alcun indice facilmente accessibile. C'è una chiave che viene aggiunta a ciascun elemento.

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

Questa chiave è accessibile tramite jquery. Così si può fare qualcosa di simile

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

Ma non è quello che si voleva. Non penso che quello che volevi fosse possibile. L'oggetto $ {$ item} dovrebbe rappresentare il metodo tmplItem(), ma non fornisce un valore per ${$item.key}. L'utilizzo di ${$.tmplItem().key} produce 0 per ogni riga.

Quindi la risposta alla tua domanda è ..... No.

Answer 2

Beh, non è una funzione esterna separata vero, ma si può schiaffeggiare una funzione sull'oggetto options è possibile passare a tmpl. Ho fatto quanto segue e funziona benissimo:

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

Nel modello, è possibile accedere alla funzione dall'oggetto $item:

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

In alternativa, invece di passare $item.data nella funzione, il contesto della funzione è l'oggetto tmplItem del modello (uguale a $ item.data). Quindi è possibile scrivere dataArrayIndex come parametrico e accedere ai dati tramite this.data.

Answer 3

Mi sono imbattuto in questo problema. molto frustrante! L'indice dell'articolo modello per esempio era sempre disponibile in jTemplates. Shouldnt stato difficile aggiungere che in penserei ...

cosa strana è che in Firebug posso vedere la proprietà chiave per ogni $ item:

Ma quando si tenta di accedervi da un funzione io chiamo dall'interno del modello:

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

Nella funzione se controllo la voce di proprietà chiave o come 'item.key' o '$ (voce) .key' ho 'undefined' e non il reale valore...

Answer 4

Ecco un hack cheezy:

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

Answer 5

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

Patch si jquery.template e poi si può fare in questo modo:

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

Answer 6

Un modo semplice per farlo usando jQuery 1.6. 4 o più recente almeno.

primo luogo come ci si aspetterebbe iterate attraverso una collezione

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

farà il trucco!

Answer 7

Creare una funzione in javascript per incrementare un contatore. Quindi creare una funzione in javascript per ottenere la posizione corrente del contatore. Queste funzioni possono essere richiamate utilizzando {{ functionName() }}. In passato ho usato la funzione in un elemento html, ad esempio in un tag di input nascosto. Questo ti permetterà di usare un indice.

Answer 8

semplicemente definire una variabile globale per il conteggio:

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