límite de resultados de cada uno en handlebars.js

Question

He escrito un pequeño complemento que muestra tweets. siguiente es el código que realiza un bucle y muestra los tweets.

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

Pero lo que yo quiero hacer es limitar el número de tweets a 5 o 10. Sin embargo, el bucle está enumerando todos los tweets disponibles. ¿Cómo limito los tweets como en for loop? como

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

Answer 1

yo creo que hay dos opciones:

1. limitar el tamaño de su colección antes de entregarla a los manillares.
2. Escribe tu propio asistente de bloque que te permite especificar un límite.

El actual each implementation es bastante simple para adaptarlo para incluir un límite superior es bastante sencillo:

// 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(''); 
}); 

Luego, en su plantilla:

<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

"cada" ya no es muy simple: https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L99

Eso es porque cada uno ahora es compatible con una gran cantidad de información de bucles hábilmente todavía quiero tener acceso a.

Por lo tanto, limitar los datos desde el principio es probablemente preferible si no desea volver a implementar los más complicados. También puede intentar usar una subexpresión dentro de cada uno (es decir, un {{#each (datos de límite 6)}} si está utilizando la última versión de manillares.

Answer 3

Estoy de acuerdo con que la duplicación de each no es una buena idea, . como dice Dtipson

su enfoque propuesto con el limit ayudante es de hecho la mejor manera la OMI, aquí está el código necesario para implementarlo:

// 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); 
}); 

Y luego en su plantilla (asumiendo que su matriz es cart.products) :

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

Necesita una versión reciente del manubrio que admita sub-expresiones para que esto funcione, por supuesto.

Answer 4

Solo eche un vistazo al valor {{@index}} y envuélvalo en un bloque {{#if}}. Si el índice es mayor que un cierto número, entonces no renderiza el marcado.

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

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