title: How do we detect the end of a loop/render in Riot.js?
body: <p>In Riot.js, it is possible conditionally display an element using and if attribute/helper. <a href="https://muut.com/riotjs/guide/#conditionals" rel="nofollow">https://muut.com/riotjs/guide/#conditionals</a></p>
  
  <p>I have been trying hard to get this right, and it does not seem to work for me. Here is a Codepen. <a href="http://codepen.io/geordee/pen/EjYgPq?editors=100" rel="nofollow">http://codepen.io/geordee/pen/EjYgPq?editors=100</a></p>
  
  <pre><code>&lt;!-- include riot.js --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.14/riot+compiler.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="riot/tag"&gt;
    &lt;todo-item&gt;
      &lt;li&gt;
        { item }
      &lt;/li&gt;
    &lt;/todo-item&gt;
  &lt;/script&gt;
  
  &lt;!-- include the tag --&gt;
  &lt;script type="riot/tag"&gt;
    &lt;todo&gt;
      &lt;h3&gt;{ opts.title }&lt;/h3&gt;
      &lt;p&gt;total items: { opts.items.length }&lt;/p&gt;
      &lt;ul each={ item, i in opts.items }&gt;
        &lt;todo-item item={ item }&gt;&lt;/todo-item&gt;
  
        &lt;!-- these work --&gt;
        &lt;div if={ true }&gt; item { i } &lt;/div&gt;
        &lt;div if={ false }&gt; do not show this &lt;/div&gt;
  
        &lt;!-- conditional --&gt;
        &lt;div if={ i == (opts.items.length - 1) }&gt;
          last item conditional
        &lt;/div&gt;
        &lt;!-- ternary --&gt;
        &lt;div if={ i == opts.items.length - 1 ? true : false }&gt;
          last item ternary
        &lt;/div&gt;
        &lt;!-- variable --&gt;
        &lt;div if={ is_true }&gt;
          last item variable
        &lt;/div&gt;
        &lt;!-- function --&gt;
        &lt;div if={ end_of_list(opts.items, i) }&gt;
          last item function
        &lt;/div&gt;
      &lt;/ul&gt;
  
      &lt;style scoped&gt;
        :scope { display: block }
        h3 { font-size: 120% }
      &lt;/style&gt;
  
      this.is_true = true;
  
      this.end_of_list = function (items, i) {
        return ( i == items.length - 1 );
      }
    &lt;/todo&gt;
  &lt;/script&gt;
  
  &lt;!-- mount point --&gt;
  &lt;todo&gt;&lt;/todo&gt;
  
  &lt;!-- mount the tag --&gt;
  &lt;script&gt;
    riot.mount('todo', { title: 'My Todo', items: [ 'buy milk', 'send letter' ] });
  &lt;/script&gt;
  </code></pre>