在此步骤中,我们查看为本地组件指定的设置的结构。
与 /assets
目录中的 render.js
文件类似,同一目录中存在预先创建的 settings.html
文件。settings.html
文件呈现组件的任何定制设置数据。在默认实施中,定制设置数据中有单个属性 imageWidth
。
要查看本地组件的结构,请执行以下操作:
使用 Oracle Content Management 桌面同步客户端,找到组件并将其与文件系统同步。
如果您没有桌面同步客户端,您可以在 Oracle Content Management Web 界面的组件选项卡上选择组件,然后下钻以查看文件。
如果列出组件下的文件,将看到以下文件:
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);
要添加要捕获的另一个属性,需要执行几个步骤:
更新用户界面以显示新值。
将值初始化为针对组件存储的当前值。
将对值的任何更改保存回组件。
要向定制组件添加另一个属性,请对 settings.html
文件进行以下更改:
添加另一个可观察项以处理新属性。更改以下代码:
self.width = ko.observable();
改用以下代码:
self.width = ko.observable(); self.imageBannerText = ko.observable();
首次显示设置面板时,获取新属性的任何当前值。更改以下代码:
self.width(data.width);
改用以下代码:
self.width(data.width); self.imageBannerText(data.imageBannerText);
保存对此新属性所做的任何更改。更改以下代码:
'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
改用以下代码:
'width': isNaN(self.width()) ? self.width() : self.width() + 'px', 'imageBannerText': self.imageBannerText()
添加用户界面以显示新字段。更改以下代码:
<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">
同步或上载 settings.html
文件。
如果要立即运行此项,则将显示该字段。但是,“设置”面板的大小不会自动更改。由于您增大了面板的大小,因此还必须将 components.json
注册条目更新为新大小。
下载 appinfo.json
文件(它与组件的 assets/
目录处于同一级别),然后更新设置面板的大小。更改以下代码:
"settingsHeight": 90,
改用以下代码:
"settingsHeight": 160,
同步或上载 appinfo.json
文件。
检查步骤 3 的结果
现在,您应该能够看到并输入添加到“设置”面板的新属性。
刷新站点中的页,以便站点构建器能够获取对组件的更改。
让页进入编辑模式。
将组件拖放到页上。
针对组件打开“设置”面板。
单击定制设置按钮。
您将看到为 settings.html
文件中的每个属性显示的两个字段。
继续执行步骤 4:显示组件中的新属性。