Velo 第３４回　リピーターデータのライフサイクル

2023年9月22日 19:05

リピーターの表示機能を知るためにも、コードでデータをポピュレイトする方法を確認しておきましょう。
リピーターは追加 / リスト / リピーターで選んでおきます。
使用するリピーターは写真(image)、名前(text)、趣味(text) が表示できれば十分です。
コレクションやデータセットは使いません。下図をご覧下さい。

このリピーター (myRepeater) にデータ (myData) をコードで乗せます。
以下のコードをご覧下さい。

const myData = [
	{'_id':'1','name':'Taro','hobby':'basketball','image':'https://static.wixstatic.com/media/b9f1f3_4c3905a80d1640509c7c31e5e27c771b~mv2.png'},
	{'_id':'2','name':'Jiro','hobby':'tennis','image':'https://static.wixstatic.com/media/b9f1f3_6fa2853987254801bb6090985605c01e~mv2.png'},
	{'_id':'3','name':'Saburo','hobby':'swimming','image':'https://static.wixstatic.com/media/b9f1f3_d0fa9bcf91064e26ad73a24553b38977~mv2.png'}
	];

各アイテムは '_id'、'name'、'hobby'、'image' をキーとするオブジェクトです。
最重要なキーは '_id' で、アイテムに必須で、かつ固有なストリング値でなければなりません。
コレクションにも同じフィールドキーがあったのを思い出す必要があります。
逆にこのキーさえあればリピーターのデータとして成立します。
気になるのは画像のURLの取得ですが、表示する画像をまずメディアマネジャーにアップロードしておきます。
下の図をご覧下さい。

アップロードした3つの画像がありますのでこれを使うのですが「もっと見る」をクリックするとアップロード画像が表示されます。
画像を右クリックして表示される「URLをコピー」コンテクストメニューから取得できます。

さて、アイテムの配列 myData をリピーターに乗せるにはリピーターの dataプロパティーを使います。
以下のコードをご覧下さい。
ページ初期化時に設定をしています。
これを実行した結果が下の図ですが期待に反しています。

$w.onReady(() => {
	
　$w('#myRepeater').data = myData;
})

リピーターの解釈としては「3個の新データが載せられたが、データの name、hobby、image をどうするのか」と言うことになります。
やむなく左端のデータを使って闇雲に表示したと思われます。

さて、リピーターが新しい ID を読んだとき、onItemReady( ) イベントを発出することが肝になります。
従ってこのイベントホルダーにデータプロパティの表示場所を指示すれば目的を果たします。以下のコードをご覧下さい。

$w.onReady(() => {

		$w('#myRepeater').data = myData;
        // 新しいIDを読むときにコールバックを実行
		$w('#myRepeater').onItemReady(($item, itemData) => {
　　　　　　　　　　　　 // エレメントfaseImage にはアイテムのimageを表示
						$item('#faceImage').src = itemData.image;
　　　　　　　　　　　　 // エレメントnameText にはアイテムのnameを表示
						$item('#nameText').text = itemData.name;
                        // エレメントhobbyText にはアイテムのhobbyを表示
						$item('#hobbyText').text = itemData.hobby})
})

onItemReady( ) は新しい ID を読むとコールバックに、そのアイテムを表示するコンテナ上のエレメントセレクター ($item)、そのアイテムデータの本体 (itemData)、アイテムのインデックス (index) を渡します。
ここでは index を使いませんので省いています。
これを実行した結果が以下の図です。今度は期待通りです。

データを取り除くときにはそのアイテムを取り除いたデータを乗せ換えるだけで正しく表示します。
Jiro を取り除いてみましょう。
以下のコードをご覧下さい。
デリートボタンにクリックイベントを作成しました。

export function deleteButton_click(event) {
	
		$w('#myRepeater').data = [{'_id':'1'},{'_id':'3'}];

}

IDさえ生きていれば表示は維持されますから上のコードでJiroが削除され、他の２人の表示はそのままです。
Taro と Saburo は ID が維持されているのでリピーターが反応しないからです。実行した結果が以下の図です。
期待通りです。

最後にアップデートですが、IDが変化しませんのでリピーターのonItemReady( ) の発出はありません。
従ってデータを乗せた後、コードで強制的にアップデートを知らせる必要があります。よく使われるのがforEachItem( )です。
この関数もコールバックに$item、itemDataを渡します。
この点はonItemReady( )と同じです。
しかし、onItemReady( )は一度設定するとその後は自動的にコールバックを実行するイベントホルダーになりますが、forEachItem( ) は毎回、関数として実行しなければなりません。
以下のコードをご覧下さい。
アップデートボタンにクリックイベントを作成しました。

export function updateButton$_click(event) {

		$w('#myRepeater').data = myUpdateData;
		$w('#myRepeater').forEachItem(($item, itemData) => {
						$item('#faceImage').src = itemData.image;
						$item('#nameText').text = itemData.name;
						$item('#hobbyText').text = itemData.hobby})
}

myUpdateData は name と hobby を日本語表示に変えてあります。
実行結果も日本語表記にアップデートされています。

Velo開発のご依頼はこちら

この記事が気に入ったらサポートをしてみませんか？

Velo 第３４回 リピーターデータのライフサイクル

Velo 第３４回　リピーターデータのライフサイクル