ステップ9: コンポーネントの各インスタンスの個別タイトルの作成
このステップでは、コンポーネントの様々なインスタンスに対して固有のタイトルを作成する方法について説明します。
コンポーネントをページにドロップすると、コンポーネント読取りのバナーがわかります: A_Local_Component
。 ユーザーが複数のコンポーネントのうち1つのみをページにドロップした場合はこれでもかまいませんが、コンポーネントの様々なインスタンスを区別できるよう、個別のタイトルを作成できます。
Sites SDKを使用して、コンポーネントのタイトルを更新できます。 このステップでは、"imageBannerText"
プロパティに基づいて更新します。
タイトルを更新するには、render.js
ファイルを編集し、次のコードをSampleComponentViewModel
オブジェクトに追加します:
self.updateDescription = ko.computed(function () {
SitesSDK.setProperty('description', self.imageBannerText());
});
このKnockout計算では、imageBannerText
の観測可能な変更が行われるたびに、コンポーネントの説明が更新されます。
ステップ9の結果の確認
-
サイト・ビルダーがコンポーネントへの変更を選択できるように、サイト内のページをリフレッシュします。
-
ページを編集モードにします。
-
ページにコンポーネントをドロップします。
-
コンポーネントに対する「設定」パネルを開きます。
-
「カスタム設定」ボタンをクリックします。
-
イメージ・バナーをWorkplaceに変更します。
-
「設定」パネルを閉じ、コンポーネントにカーソルを合わせてバナーを表示します。
A_Local_Component Workplace
が表示されます。