步驟 3：複查本機元件設定值的結構

在此步驟中，我們會複查指定用於本機元件的設定值結構。

與 /assets 目錄中的 render.js 檔案類似，相同目錄中有預先建立的 settings.html 檔案。settings.html 檔案會呈現元件的任何自訂設定值資料。預設的實行中，自訂設定值資料內有單一特性 imageWidth。

複查本機元件的結構：

1. 使用 Oracle Content Management 桌面同步從屬端找出元件，並將其與檔案系統同步。

   如果沒有桌面同步從屬端，您可以在 Oracle Content Management Web 介面的元件頁籤上選取該元件，然後向下展開來查看檔案。

2. 如果列出元件底下的檔案，您將會看到這些檔案：

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

開啟 /assets 目錄底下的 settings.html 檔案，然後複查該內容。與 render.js 檔案不同，settings.html 檔案在「網站產生器」的「設定值」面板中使用內嵌框架，這也是為何該檔案需要存取支援檔案才能在內嵌框架中正確呈現的原因。您需要「網站產生器」來管理您的網站，以便將 JavaScript 程式碼中的任何錯誤與「網站產生器」隔離，這也是為何 settings.html 檔案要使用內嵌框架的原因。

這些是 settings.html 檔案的主要區域：

• 呈現「設定值」面板的 Knockout 樣板。

  <!-- ko if: initialized() -->
  <div class="scs-component-settings">
    <div>
      <!-- Width -->
      <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
      <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
    </div>
  </div>
  <div data-bind="setSettingsHeight: true"></div>
  <!-- /ko -->

• 自訂連結處理程式，以便在「設定值」面板呈現後，調整內嵌框架的高度。

  ko.bindingHandlers.scsCompComponentImpl

• 套用至 Knockout樣板的 Knockout ViewModel。

  SettingsViewModel

這些是 SettingsViewModel 的主要元素：

• 元件生命週期的訂閱。

• 元件初始化：

  • 請確定擷取所有資料後，才會呈現該元件。這透過 Knockout 可監測項目處理。

    self.initialized = ko.observable(false);

  • 請確定準備之後，才會嘗試更新該資料。

    self.saveData = false;

  • 取得所有必要特性的最初值。這由回呼處理，以擷取資料。

        SitesSDK.getProperty('customSettingsData', function (data) {
          //update observable
          self.width(data.width);
    
          // note that viewModel is initialized and can start saving data
          self.initialized(true);
          self.saveData = true;
        });

• 將任何特性變更儲存至自訂設定值資料。

      self.save = ko.computed(function () {
        var saveconfig = {
          'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
        };
  
        // save data in page
        if (self.saveData) {
          SitesSDK.setProperty('customSettingsData', saveconfig);
        }
      }, self);

若要新增其他想要擷取的特性，需要幾個步驟：

1. 更新使用者介面以顯示新值。

2. 將值起始為元件目前儲存的值。

3. 將值的所有變更儲存回元件。

若要將其他特性新增至自訂元件，請對 settings.html 檔案進行這些變更：

1. 新增其他可監測項目以處理新特性。請將以下程式碼：

   self.width = ko.observable();

   改為使用以下程式碼：

   self.width = ko.observable();
   self.imageBannerText = ko.observable();

2. 第一次顯示設定值面板時，請取得新特性的目前所有值。請將以下程式碼：

   self.width(data.width);

   改為使用以下程式碼：

   self.width(data.width);
   self.imageBannerText(data.imageBannerText);

3. 將任何變更儲存至此新特性。請將以下程式碼：

       'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

   改為使用以下程式碼：

   'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
   'imageBannerText': self.imageBannerText()

4. 新增使用者介面以顯示新的欄位。請將以下程式碼：

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

   改為使用以下程式碼：

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
   
   <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
   <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

5. 同步或上傳 settings.html 檔案。

若要現在執行，則會顯示欄位。但是，「設定值」面板的大小不會自動變更。因為您已增加了面板的大小，您必須將 components.json 註冊項目更新為新的大小。

1. 下載 appinfo.json 檔案，該檔案與您元件的 assets/ 目錄屬於同一層級，然後更新設定值面板的大小。請將以下程式碼：

   "settingsHeight": 90,

   改為使用以下程式碼：

   "settingsHeight": 160,

2. 同步或上傳 appinfo.json 檔案。