risultati limite di ciascuno in handlebars.js

Question

Ho scritto un piccolo plug-in che mostra i tweet. di seguito è riportato il codice che scorre e visualizza i tweet.

<script id="tweets-template" type="text/x-handlebars-template" > 
     {{#each this}} 
     <li> 
     <p>{{tweet}}</p> 
      <span id="author">{{author}}<span/> 
     </li> 
     {{/each}} 
    </script> 

Ma quello che voglio fare è limitare il numero di tweets per 5 o 10. Ma il ciclo è elencando tutti i tweet disponibili. Come posso limitare i tweet come in ciclo for. come

for(i=0;i<5;i++){display the tweets} 

Answer 1

penso che si hanno due opzioni:

1. limitare le dimensioni della vostra collezione prima di consegnarlo al manubrio.
2. Scrivi il tuo blocco proprio che ti consente di specificare un limite.

L'attuale each implementation è abbastanza semplice in modo adattandolo ad includere un limite superiore è abbastanza semplice:

// Warning: untested code 
Handlebars.registerHelper('each_upto', function(ary, max, options) { 
    if(!ary || ary.length == 0) 
     return options.inverse(this); 

    var result = [ ]; 
    for(var i = 0; i < max && i < ary.length; ++i) 
     result.push(options.fn(ary[i])); 
    return result.join(''); 
}); 

Poi nel modello:

<script id="tweets-template" type="text/x-handlebars-template" > 
    {{#each_upto this 5}} 
     <li> 
      <p>{{tweet}}</p> 
      <span id="author">{{author}}<span/> 
     </li> 
    {{/each_upto}} 
</script> 

Answer 2

"ogni" non è più molto semplice: https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L99

Questo perché ognuno supporta ora un intero host di informazioni sul loop che si verificano volere assolutamente avere accesso a

Quindi limitare i dati in anticipo è probabilmente preferibile se non si desidera reimplementare il molto più complicato ciascuno. Puoi anche provare a usare una sottoespressione all'interno di ciascuna (cioè un {{#each (limite di dati 6)}} se stai usando l'ultima versione di manubri

Answer 3

Sono d'accordo che la duplicazione di each non sia al momento una buona idea, . come Dtipson dice

il suo approccio proposto con il limit helper è davvero il modo migliore IMO, ecco il codice necessario per la sua attuazione:

// limit an array to a maximum of elements (from the start) 
Handlebars.registerHelper('limit', function (arr, limit) { 
    if (!_.isArray(arr)) { return []; } // remove this line if you don't want the lodash/underscore dependency 
    return arr.slice(0, limit); 
}); 

E poi nel modello (supponendo che la matrice è cart.products) :

{{#each (limit cart.products 5)}} 
    <li>Index is {{@index}} - element is {{this}}</li> 
{{/each}} 

È necessario disporre di una versione di manubrio recente che supporti le sottoespressioni affinché ciò avvenga.

Answer 4

Basta dare un'occhiata al valore {{@index}} e avvolgerlo in un blocco {{#if}}. Se l'indice è maggiore di un certo numero, allora non rendere il markup.

var collection = { ... tweets ... } 

{{#each collection}} 
    {{#if @index < 5}} 
     <tweet markup> 
    {{/if}} 
{{/each}}