limit results of each in handlebars.js

问题

I have written a small plugin that displays tweets. following is the code that loops and displays the tweets.

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

But what I want to do is limit the number of tweets to 5 or 10. But the loop is listing all the available tweets. How do I limit the tweets like in for loop. like

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

回答1:

I think you have two options:

Limit the size of your collection before handing it to Handlebars.
Write your own block helper that lets you specify a limit.

The actual each implementation is pretty simple so adapting it to include an upper limit is fairly straight forward:

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

Then in your template:

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

I agree that duplicating each is currently not a good idea, as Dtipson says.

His proposed approach with the limit helper is indeed the best way IMO, here is the code needed to implement it:

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

And then in your template (assuming your array is cart.products):

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

You need a recent handlebars version that supports sub-expressions for this to work of course.

回答3:

"each" is no longer very simple: https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L99

That's because each now supports a whole host of loop information you probably want to still have access to.

So limiting the data early on is probably preferable if you don't want to reimplement the much more complicated each. You could also try using a subexpression within each (i.e. a {{#each (limit data 6)}} if you're using the latest version of handlebars.

回答4:

Just have a look at the {{@index}} value and wrap it in an {{#if}} block. If the index if greater than an certain number then don't render the markup.

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

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

来源：https://stackoverflow.com/questions/10377700/limit-results-of-each-in-handlebars-js

标签

jquery

html

handlebars.js