limit results of each in handlebars.js

Question

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}

Answer 1

I think you have two options:

1. Limit the size of your collection before handing it to Handlebars.
2. 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>