Handlebars loop view more content

I have a handlebars loop that itarate some values from an ajax call . The problem is i want to only show 4 results and put a view more button where by when it is clicked , six more values are shown..

<ul>
{{each events}}
   <li>{{event_name}}</li>
{{/each}}
<li><a href="#">View More Events</a></li>
</ul>

How Can i limit the loop to only show 4 events then when View More Events is clicked to show another 6 events . I tried with jquery but it seems to have some interference with handlebars and the nothing happened..