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>