3

Riot.js では、and if 属性/ヘルパーを使用して要素を条件付きで表示することができます。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>
4

1 に答える 1

8

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

于 2015-04-17T18:25:25.213 に答える