UIをデータにバインドする
Studioではユーザーインターフェース要素を実際のバックエンドデータにバインドすることができます。コンポーネントにプロパティを追加し、その後、子UIエレメントでそのプロパティを参照します。開始するには、まずAmplify Studioにログインしてから、UI LibraryのConfigureボタンを選択してUIコンポーネントに移動します。この例では、_CardB_コンポーネントを使用します。
コンポーネントプロパティを追加する
プロパティを追加するには、Add propを選択してプロパティの名前を設定します。この例では、Home型の新しいプロパティhomeを作成します。
子プロパティ値を設定する
$99 USDテキスト要素などの子要素を選択し、Set propを選択します。ここでは、その子要素のすべての利用可能なプロパティを設定できます。テキスト要素のlabelを設定して、値をPrice: $に設定し、キーボードで_Command + Enter_（または_Ctrl + Enter_）を選択して、home.priceなどの別の値を連結します。
住所のテキスト要素のlabelをhome.addressにバインドし、画像のsrcをhome.image_urlにバインドします。
Studioを通じて従来のHTMLプロパティも設定できます。たとえば、displayをnoneに設定して、「4bds 3 ba 2,530 sqft - Active」を含むテキスト要素を非表示にします。
プレビューデータをシャッフルする
コンポーネントが異なるデータでどのようにスケーリングするかを確認するには、Shuffle preview dataボタンを選択します。これによってデータベース内のランダムレコードが選択され、プロパティとして適用されてコンポーネントをプレビューします。
