C'è un modo per ottenere l'indice durante l'iterazione attraverso una collezione in Meteor?

Question

L'esempio seguente genererà un elenco di nomi di giocatori, in cui i giocatori sono un set di dati da un database .

<template name="players"> 
    {{#each topScorers}} 
    <div>{{name}}</div> 
    {{/each}} 
</template> 

Tuttavia, voglio visualizzare quattro di loro in fila, e dopo quattro giocatori è stampata, voglio dividere la linea da <hr /> e poi continuare. Per esempio,

<template name="players"> 
    {{#each topScorers}} 
    <div style="float:left;">{{name}}</div> 
    {{if index%4==0}} 
     <hr style="clear:both;" /> 
    {{/if} 
    {{/each}} 
</template> 

Come posso fare qualcosa di simile, mentre scorrendo le collezioni?

Answer 1

Non c'è un modo semplice per farlo in questo momento, l'ultima versione di manubri supporta un campo @index (che farebbe quello che vuoi), ma non è ancora stato implementato nella versione di Meteor - https://github.com/meteor/meteor/issues/489.

Certamente è possibile implementare il proprio {{#each_with_index}} aiutante, sarebbe simile a questa:

Handlebars.registerHelper('each_with_index', function(items, options) { 
    var out = ''; 
    for(var i=0, l=items.length; i<l; i++) { 
    var key = 'Branch-' + i; 
    out = out + Spark.labelBranch(key,function(){ 
     options.fn({data: items[i], index: i}); 
    }); 
    } 

    return out; 
}); 

Il rovescio della medaglia è che si perde la gentilezza di {{#each}} aiutante di meteore, che non reattivo ri-renderizzare il tutta la lista quando cambia un singolo oggetto.

EDIT: grazie @zorlak per puntatore a https://github.com/meteor/meteor/issues/281#issuecomment-13162687

Answer 2

Un'altra soluzione, in linea con il mantenimento della reattività della collezione, è quello di utilizzare un modello soccorritore presso il map cursor function.

Ecco un esempio che mostra come restituire l'indice quando si utilizza ognuno con una collezione:

index.html: 

<template name="print_collection_indices"> 
    {{#each items}} 
    index: {{ this.index }} 
    {{/each}} 
</template> 

index.js: 

Items = new Meteor.Collection('items'); 

Template.print_collection_indices.items = function() { 
    var items = Items.find().map(function(doc, index, cursor) { 
    var i = _.extend(doc, {index: index}); 
    return i; 
    }); 
    return items; 
};