Each バインディング

オブジェクトのイテレーション操作のために、each バインディングを利用することができます。

{{ _items.each do |item| }}
  <p>{{ item }}</p>
{{ end }}

上記では、_item が配列だった場合、item に配列の各要素の値がセットされ、ブロックはその要素それぞれに対してレンダリングを行います。

.each_with_index を実行すると、ブロック内のローカル変数としてインデックス値を利用できます。

{{ _items.each_with_index do |item, index| }}
  <p>{{ index }}. {{ item }}</p>
{{ end }}

例えば、['one', 'two', 'three'] という配列の場合であれば、以下のように出力されます。

0. one
1. two
2. three

ゼロオフセットを修正したければ {{ index + 1 }} としてください。

配列の要素が追加または削除された場合には、each バインディングは自動的に要素を DOM に追加、もしくは DOM から削除します。

インデックスの利用 (with index)

バインディングはそれぞれ .each_with_index をサポートしています。

{{ _items.each_with_index do |item, index| }}
    <p>{{ index }}. {{ item.name }}</p>
{{ end }}

現在の制限事項

現在のところ、バインディングの .each には多くの制限があります。(それに対して対応中です) 配列のみを扱うことができて、ハッシュを扱うことはできません。ハッシュを使いたい場合は、まず配列に変換する必要があります。また、引数を1つしかとることができません (.each_with_index の場合を除く) 。