title: How to loop in ractive.js
body: <p>I have got the following data (sample):</p>
  
  <pre><code>"data": {
          "eventsHeading": "Upcoming events",
          "eventsToBeDisplayed": 3,
          "allEventLinkText": "See all events",
          "eventsList": [
      {
          "eventDate": "22/12/2015",
          "eventTitle": "EVENT INFO 1"
      },
      {
          "eventDate": "22/12/2015",
          "eventTitle": "EVENT INFO 2"
      },
      {
          "eventDate": "14/01/2016",
          "eventTitle": "EVENT INFO 3"
      },
      {
          "eventDate": "14/01/2016",
          "eventTitle": "EVENT INFO 4"
      }
          ]
      }
  </code></pre>
  
  <p>And I have something like this:</p>
  
  <pre><code>{{#eventsList}}
      &lt;tr&gt;
          &lt;td class="date-column"&gt;{{eventDate}}&lt;/td&gt;
          &lt;td class="text-link truncate-text"&gt;&lt;span decorator="tooltip:{{eventTitle}}" tabindex="0"&gt;{{eventTitle}}&lt;/span&gt;
      &lt;/tr&gt;
  {{/}}
  </code></pre>
  
  <p>And now it will just print all the data for <code>eventList</code>. What I want to do is add a <code>for</code> loop like </p>
  
  <pre><code>i=0;i&lt;={{eventsToBeDisplayed}};i++
  </code></pre>
  
  <p>so only 3 of the data will show.</p>
  
  <p>What do you think is the best approach for this?</p>