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

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

    <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}

Ответ 1

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

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

Фактическая реализация each довольно проста, поэтому адаптация ее к верхнему пределу довольно прямолинейна:

// 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>

Ответ 2

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

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

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

И затем в вашем шаблоне (при условии, что ваш массив - cart.products):

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

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

Ответ 3

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

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

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

Ответ 4

Так как мое редактирование было отклонено мю слишком коротко

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

Он предлагает мне сделать ответ вместо того, чтобы самому его исправить:

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>

Ответ 5

Вам не нужно делать функцию. Просто сделай это.

{{#each this.[5]}}
    <li>
    <p>{{tweet}}</p>
        <span id="author">{{author}}<span/>
    </li>
{{/each}}

Я нашел это в документе руль

Ответ 6

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

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

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