Ractive.jsで、テンプレートで繰り返し処理を行う

最終更新日:2015-08-09

dataとして配列を指定した場合、テンプレート内で繰り返し処理をすることができます。

<script id="myTemplate" type="text/ractive">
  <ul>
    {{#week}}
    <li>{{.}}</li>
    {{/}}
  </ul>
</script>

<script>
  var ractive = new Ractive({
    el : '#container',
    template : '#myTemplate',
    data : {
      week : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    }
  });
</script>

順に見ていきましょう。

dataに配列を指定する

まずは元となるデータを用意します。ここでは1週間の曜日を表すweekを用意してみます。

var ractive = new Ractive({
  el : '#container',
  template : '#myTemplate',
  data : {
    week : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  }
});

テンプレートで繰り返し処理を行う

テンプレートで繰り返し処理を行うには、{{#変数名}}と{{/}}で行います。繰り返しで取り出した値は{{.}}で指定できます。

<script id="myTemplate" type="text/ractive">
  <ul>
    {{#week}}
    <li>{{.}}</li>
    {{/}}
  </ul>
</script>