Solución:
Creo que tienes dos opciones:
- Limite el tamaño de su colección antes de entregársela a Handlebars.
- Escriba su propio ayudante de bloque que le permita especificar un límite.
El actual each
La implementación es bastante simple, por lo que 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 tu 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>
Estoy de acuerdo en que duplicar each
actualmente no es una buena idea, como dice Dtipson.
Su enfoque propuesto con el limit
helper es de hecho la mejor manera en mi opinión, 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 (!Array.isArray(arr)) { return []; }
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}}
Por supuesto, necesita una versión de manillar reciente que admita subexpresiones para que esto funcione.
“cada uno” ya no es muy simple: https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L99
Esto se debe a que ahora cada uno admite una gran cantidad de información de bucle a la que probablemente desee tener acceso.
Por lo tanto, es preferible limitar los datos desde el principio si no desea volver a implementar los que son mucho más complicados. También puede intentar usar una subexpresión dentro de cada uno (es decir, un {{#each (límite de datos 6)}} si está usando la última versión de manillares.