limit results of each in handlebars.js

handlebars.js, html, jquery

Solution

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>

Problem

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

Original source