步驟 10：使用具有內嵌編輯的巢狀元件

Oracle Content Management 元件使用 KnockoutJS 元件架構實行。這表示如果您使用 KnockoutJS 實行元件，就能將 Oracle Content Management 內建元件直接包含在樣板中。

註：

因為 Oracle Content Management 內建元件僅能在 Oracle Content Management 頁面中執行，所以如果您的元件在內嵌框架中呈現，則無法使用巢狀元件。

若要利用巢狀元件：

  1. 使用 KnockoutJS 實行您的元件。

  2. 使用 RequireJS 包含您的元件，並使用 Oracle Content Management 建立的相同 Knockout "ko" 執行處理變數。

    這是必要項目，因為 Oracle Content Management 會擴充具有元件的 Knockout，如果您使用自己的 KnockoutJS 執行處理，就無法使用這些元件。

您將在此步驟中複查 Oracle Content Management「影像」、「段落」及「標題」元件在自訂元件中呈現的方式。使用者將可以在頁面內直接編輯，並存取巢狀元件的「設定值」面板。

若要查看如何將這些元件包含在您的樣板中，請編輯 render.js 檔案並查看 sampleComponentTemplate 物件。所呈現的預設區段如下所示：

'<!-- ko if: alignImage() !== \'right\' -->' +
'<div style="display:flex;">' +
'<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +
'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData } }"></scs-image>' +
'</div>' +
'<div data-bind="attr: {style: paragraphStyle}">' +
'<scs-title params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'titleId\', \'data\': titleData } }"></scs-title>' +
'<scs-paragraph params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'paragraphId\', \'data\': paragraphData } }"></scs-paragraph>' +
'</div>' +
'</div>' +
'<!-- /ko -->' +

查看 <scs-image> 巢狀物件時，您將會看到下列項目：

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
傳送至 params 樣板連結的 scsComponent 資料包含下列項目：

  • renderMode：指的是「網站產生器」使用的模式。您可以透過它啟用和停用功能。例如，在 <scs-title> 元件使用此項目時，它會在執行 edit 模式時新增 RTF 編輯器。

  • parentId：此為必要項目，以便 Oracle Content Management 元件知道其呈現為巢狀元件。所有巢狀元件的變更將儲存在自訂元件的資料中。

  • id：巢狀元件的唯一 ID。這會以自訂元件的 ID 命名。

  • data：巢狀元件的初始資料。如果未進一步修改元件，則會呈現此初始資料。

參照的 id 和 mode 值會傳入 SampleComponentViewModel 物件中的自訂元件，因此您不需要修改物件就能取得這些值：

// Store the args
self.mode = args.viewMode;
self.id = args.id;

所有其他支援的巢狀元件語法依照與 <scs-paragraph> 相同的樣式；例如：<scs-image>、 <scs-title>、 <scs-button>。

檢查步驟 10 的結果

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

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

  3. 將您的元件拖放到頁面中。

  4. 按一下元件的 As a page author, you can edit. . . 文字，並使用 RTF 編輯器更新描述。

  5. 切換為「預覽」模式以查看您的更新。

  6. 切換回「編輯」模式。

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

  8. 按一下現在出現的元件連結，因為它找到您的巢狀元件。

  9. 按一下段落，這是它找到的巢狀元件。

您現在可以針對元件中的「段落」元件更新特性。

註：

Oracle Content Management 在元件建立後才會知道樣板中可能存在的任何巢狀元件。若要讓 Oracle Content Management 瞭解隱藏的巢狀元件，您可以使用 SitesSDK.setProperty('visibleNestedComponents', []); API。若要依照預設顯示隱藏的巢狀元件，您必須更新元件註冊中的 "nestedComponents": [] 陣列。

繼續進行步驟 11：支援不同的版面配置。