在handlebars.js每个限结果(limit results of each in handl

我写了显示鸣叫一个小插件。 下面是一个循环，并显示鸣叫的代码。

    <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循环的tweet。 喜欢

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

Answer 1:

我认为你有两个选择：

1. 递给车把前限制您的集合的大小。
2. 写自己的块帮手，让你指定限制。

实际的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>

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

您需要支持的子表达式这当然工作最近车把版本。

Answer 3:

“每个”不再是很简单的： https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L99

这是因为每一个现在支持你可能想还是有机会获得循环的信息一大堆。

因此，限制早期的数据，如果你不想重新实现更为复杂的每个可能是优选的。 你也可以尝试使用中的每个子表达式（即，如果您使用的是最新版本的车把{{#each（限6）}}数据。

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

Answer 5:

你不必做一个功能。 只要做到这一点。

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

我发现这个在车把文件

Answer 6:

只要看看在{{@index}}值和一个包装它{{#if}}块。 如果不是一定数量的指数如果大于不会使标记。

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

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

文章来源: limit results of each in handlebars.js