contatore per manubri #each

Question

In Manubrio, dire che ho una collezione di names come posso fare

{{#each names}} 
{{position}} 
{{name}} 
{{/each}} 

dove {{position}} è 1 per il primo nome, 2 per il secondo nome ecc fare Devo assolutamente memorizzare la posizione come chiave nella collezione?

Answer 1

Anche se non è possibile farlo con alcun helper Handlebars nativo, è possibile crearne uno proprio. È possibile chiamare Handlebars.registerHelper(), passandogli una stringa con il nome che si desidera abbinare (posizione) e una funzione che restituisca il conteggio della posizione corrente. Puoi tenere traccia del numero di posizione nella chiusura in cui chiami registerHelper. Ecco un esempio di come è possibile registrare un helper chiamato position che dovrebbe funzionare con l'esempio del modello.

JavaScript:

// Using a self-invoking function just to illustrate the closure 
(function() { 
    // Start at 1, name this unique to anything in this closure 
    var positionCounter = 1; 

    Handlebars.registerHelper('position', function() { 
     return positionCounter++; 
    }); 

    // Compile/render your template here 
    // It will use the helper whenever it seems position 
})(); 

Ecco un jsFiddle dimostrare: http://jsfiddle.net/willslab/T5uKW/1/

Mentre aiutanti sono documentate su handlebarsjs.com, questo ha preso un certo sforzo per me per capire come usarli. Grazie per la sfida, e spero che aiuti!

Answer 2

Si può fare questo con la notazione integrato Manubrio @index:

{{#each array}} 
    {{@index}}: {{this}} 
{{/each}} 

@index darà il (a base zero) indice di ogni elemento dell'array dato.

Nota: per le persone che utilizzano Handlebars con il motore di visualizzazione Razor è necessario utilizzare la notazione @@ index per evitare errori di compilazione.

Per ulteriori built-in aiutanti vedere http://handlebarsjs.com/

Answer 3

solo è necessario utilizzare {{}} @index

esempio:

{{#.}} 
<li class="order{{@index}}"> counter: {{@index}}</li> 
{{/.}} 

Answer 4

Ecco la mia soluzione preferita. Registrare un helper che estenda il contesto per includere automaticamente la proprietà della posizione. Quindi usa il tuo nuovo blocco helper (es. #iter) invece di #each.

Handlebars.registerHelper('iter', function (context, options) { 
    var ret = ""; 

    for (var i = 0, j = context.length; i < j; i++) { 
     ret += options.fn($.extend(context[i], {position: i + 1})); 
    } 

    return ret; 
}); 

Usage:

{{#iter names}} 
    {{position}} 
    {{name}} 
{{/iter}} 

adattato da http://rockycode.com/blog/handlebars-loop-index/

Answer 5

Handlebars.registerHelper("counter", function (index){ 
    return index + 1; 
}); 

Usage:

{{#each names}} 
    {{counter @index}} 
    {{name}} 
{{/each}} 

Answer 6

è possibile ottenere il valore solo dall'indice all'interno dell'elenco.

{{#each list}} 
    @index 
{{/each}}