javascript - 我们如何检测 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

In the looped element everything but the each attribute belongs to the child context, so the title can be accessed directly and remove needs to be prefixed with parent. since the method is not a property of the looped item.

所以以下将起作用:

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

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