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

我认为你有两个选择：

在将集合交给Handlebars之前限制集合的大小。
编写您自己的块助手，可以指定限制。

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

我同意复制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

您不必执行任何功能。就是这样做。

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

我在handlebars document

中找到了这个

Answer 5

只需查看{{@index}}值并将其包装在{{#if}}块中即可。如果索引大于某个数字，则不呈现标记。

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

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

限制handlebars.js中每个的结果

5 个答案: