このステップでは、コンポーネントの各インスタンスに個別のタイトルを作成する方法について説明します。
ページにコンポーネントをドロップすると、A_Local_Componentというコンポーネントのバナーが表示されます。ユーザーがコンポーネントのいずれかのみをページにドロップする場合は問題ありませんが、ユーザーがコンポーネントの各インスタンスを区別できるように、個別のタイトルの作成が必要になる場合があります。
サイトSDKを使用すると、コンポーネントのタイトルを更新できます。このステップでは、"imageBannerText"プロパティに基づいて更新します。
タイトルを更新するには、render.jsファイルを編集し、このコードをSampleComponentViewModelオブジェクトに追加します。
self.updateDescription = ko.computed(function () {
SitesSDK.setProperty('description', self.imageBannerText());
});
このKnockoutの計算では、imageBannerTextオブザーバブルが変更されるたびに、コンポーネントの説明が変更されます。
ステップ9の結果の確認
サイト・ビルダーでコンポーネントへの変更内容を反映できるように、サイトでページをリフレッシュします。
ページを編集モードで取り込みます。
ページにコンポーネントをドロップします。
「設定」パネルをコンポーネントに対して開きます。
「カスタム設定」ボタンをクリックします。
Image BannerをWorkplaceに変更します。
「設定」パネルを閉じて、カーソルをコンポーネントの上に置いてバナーを表示します。
A_Local_Component Workplaceが表示されます。