我们如何在Riot.js中检测循环/渲染的结束？

Question

在Riot.js中,可以使用和if属性/帮助器有条件地显示元素.https://muut.com/riotjs/guide/#conditionals

我一直在努力做到这一点,这对我来说似乎没有用.这是一个Codepen.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