ограничить результаты каждого в handlebars.js

Question

Я написал небольшой плагин, который отображает твиты. Ниже приведен код, который пеет и отображает твиты.

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

Но то, что я хочу сделать, это ограничить количество твитов 5 или 10. Но петля перечень всех доступных твитов. Как ограничить твиты, как в цикле for. как

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

Answer 1

Я думаю, что у вас есть два варианта:

1. Ограничить размер вашей коллекции, прежде чем передать его на рули.
2. Напишите свой собственный блок-помощник, который позволяет указать ограничение.

Фактическое each implementation довольно просто так адаптируя его включить верхний предел не является довольно прямо вперед:

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

Затем в шаблоне:

<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

«каждый» больше не очень просто: https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L99

Это потому, что каждый из них теперь поддерживает всю информацию о петле, которую вы пытаетесь умеют все еще иметь доступ.

Так что ограничение данных на раннем этапе, вероятно, предпочтительнее, если вы не хотите переопределять гораздо более сложные. Вы также можете попробовать использовать подвыражение в каждом (например, {{#each (limit data 6)}}, если вы используете последнюю версию ручек.

Answer 3

Я согласен с тем, что дублирование each в настоящее время не очень хорошая идея, ., как Dtipson говорит

предложил его подход с limit помощник действительно лучший способ ИМО, вот код, необходимый для его реализации:

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

а затем в шаблоне (предполагается, что ваш массив cart.products) :

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

Вам нужна последняя версия руля, которая поддерживает подвыражения для этого, чтобы работать, конечно.

Answer 4

Просто взгляните на значение {{@index}} и оберните его в блок {{#if}}. Если индекс, превышающий определенное число, не отображает разметку.

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

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