Как определить конец цикла/рендеринга в Riot.js?

Question

В Riot.js можно условно отобразить элемент, используя атрибут/хелпер. https://muut.com/riotjs/guide/#conditionals

Я стараюсь, чтобы все было правильно, и это, похоже, не работает для меня. Вот кодепен. http://codepen.io/geordee/pen/EjYgPq?editors=100

<!-- include riot.js --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.14/riot+compiler.min.js"></script> 

<script type="riot/tag"> 
    <todo-item> 
    <li> 
     { item } 
    </li> 
    </todo-item> 
</script> 

<!-- include the tag --> 
<script type="riot/tag"> 
    <todo> 
    <h3>{ opts.title }</h3> 
    <p>total items: { opts.items.length }</p> 
    <ul each={ item, i in opts.items }> 
     <todo-item item={ item }></todo-item> 

     <!-- these work --> 
     <div if={ true }> item { i } </div> 
     <div if={ false }> do not show this </div> 

     <!-- conditional --> 
     <div if={ i == (opts.items.length - 1) }> 
     last item conditional 
     </div> 
     <!-- ternary --> 
     <div if={ i == opts.items.length - 1 ? true : false }> 
     last item ternary 
     </div> 
     <!-- variable --> 
     <div if={ is_true }> 
     last item variable 
     </div> 
     <!-- function --> 
     <div if={ end_of_list(opts.items, i) }> 
     last item function 
     </div> 
    </ul> 

    <style scoped> 
     :scope { display: block } 
     h3 { font-size: 120% } 
    </style> 

    this.is_true = true; 

    this.end_of_list = function (items, i) { 
     return (i == items.length - 1); 
    } 
    </todo> 
</script> 

<!-- mount point --> 
<todo></todo> 

<!-- mount the tag --> 
<script> 
    riot.mount('todo', { title: 'My Todo', items: [ 'buy milk', 'send letter' ] }); 
</script> 

Answer 1

Вы должны использовать parent внутри цикла, как область изменилась.

https://muut.com/riotjs/guide/#context

В зацикленной элементе все, но каждый атрибут принадлежит к контексту ребенка, поэтому название можно получить доступ непосредственно и устранить потребности быть с префиксом родителем. поскольку этот метод не является свойством элемента с петлей.

Так следующее будет работать:

<div if={ ((parent.opts.items.length-1) == i) }>Hello :)</div> 

http://codepen.io/anon/pen/KpPgLj?editors=100