同じレイアウトで異なるデータを表示できるリピーターはとても洗練されたエレメントです。
商品の提示、人物の紹介など様々なシーンで活用されています。
静的なデータの表示にも使われますがやはりコレクションとリンクしてダイナミックにデータを表示することこそリピーターの本領でしょう。

データの表示をすべてコードで制御することは難しくはないですが、ここではリピーター(myRepeater)とコレクションが、データセットを介してリンクされている標準的な状況を考えておきます。

さて、リピーターにデータが繋がると、その配列に登録されているアイテムごとに onItemReady( ) イベントハンドラーが立ち上がり、コールバック関数にアイテムに応じた３つの変数を渡します。
１つ目はリピーター内のエレメントセレクター $item です。
２つ目はアイテムデータそのものの itemData です。
３つ目はアイテムのデータ配列内のインデックス index です。

このイベントハンドラー onItemReady( ) はアイテムの接続ごとに立ち上がります。
従って、例えばリピーター内の画像(myImage)にマウスを乗せたときにその画像を拡大するアニメーション効果を得たいときは、それをマウスイベントのコールバックとするコールバックを代入すれば実装できます。
次のコードをご覧下さい。

// ページの初期化を定義
$w.onReady(() => {

    // リピーターのイベントハンドラーを定義
　　// ここでは $item しか使わないので引数はこの１つでよい
　　$w('#myRepeater').onItemReady(($item) => {

　　　// 写真にマウスが乗ったときのイベントハンドラーを定義
      $item('#myImage').onMouseIn(() => {

　　　　　// アニメーション効果のコールバックをアイテムごとに実装
         let animationTarget = $item('#myImage');
             timeline()
             .add(animationTarget,{scale:1.1, duration: 500})
             .add(animationTarget,{scale:1.0, duration: 500})
             .play();
 })})})}) 

このコードではページの初期化と同時にアイテムごとにイベントハンドラーを実装しましたが、クリックしたときに、クリックされたアイテムを判別して画像を拡大する方法もよく使われます。
次のコードをご覧下さい。

// ページの初期化を定義
$w.onReady(() => {

　 // リピーターのどれかの写真にマウスが乗ったときのイベントハンドラーを定義
   $w('#myImage').onMouseIn((event) => {
　　 // リピーター内のセレクター関数をゲット
     let $item = $w.at(event.context);
     　　// セレクター関数でマウスが乗った写真を特定しアニメーションターゲットに設定
　　　　 // アニメーション効果のコールバックをアイテムに実装
　　　　　let animationTarget = $item('#myImage');
             timeline()
             .add(animationTarget,{scale:1.1, duration: 500})
             .add(animationTarget,{scale:1.0, duration: 500})
             .play();
})})

このコードでは 先ずグローバルセレクター $w( ) を使い $w('#myImage') で全てのの画像についてのイベントハンドラーを定義し、at( ) 関数でリピーター内のアイテムセレクター $item( ) を取得し、$item('#myImage') でマウスが乗った画像を特定する方法を取っています。

Velo開発のご依頼はこちら