步驟 9:為元件的每個執行處理建立不同的標題

此步驟說明如何針對元件的不同執行處理建立不同的標題。

將元件放置在頁面上時,您會注意到元件的橫幅為:A_Local_Component。當使用者只有在頁面上放置其中一個元件時倒無所謂,但是您可能想要建立不同的標題,讓使用者能夠區分您元件的不同執行處理。

您可以使用 Sites SDK 更新元件的標題。在此步驟中,您將會根據 "imageBannerText" 特性進行更新。

若要更新標題,請編輯 render.js 檔案並將以下程式碼新增至您的 SampleComponentViewModel 物件:

self.updateDescription = ko.computed(function () {
  SitesSDK.setProperty('description', self.imageBannerText());
});

每當 imageBannerText 可監測項目變更時,此 Knockout 運算就會更新元件的描述。

檢查步驟 9 的結果

  1. 重新整理網站中的頁面,讓網站產生器能夠取得元件的變更。

  2. 將頁面切換為「編輯」模式

  3. 將您的元件放置在頁面上。

  4. 顯示您元件的「設定值」面板。

  5. 按一下自訂設定值按鈕。

  6. Image Banner 變更為 Workplace

  7. 關閉「設定值」面板,並將游標停駐在元件上方以顯示橫幅。

    現在應該會看到顯示 A_Local_Component Workplace

繼續進行步驟 10:使用具有內嵌編輯的巢狀元件