在此步骤中,我们将查看允许用户变更组件显示方式的布局。
定制组件可以支持您要允许用户选择的任意数量的布局。这些布局中的每个布局都将变更定制组件的显示方式。布局是对注册数据的另一个扩展。
要查看示例代码中支持的三种布局,请查看 appinfo.json
文件中的 "componentLayouts"
条目
"componentLayouts": [ { "name": "default", "displayName": "IMAGE_LEFT_LAYOUT" }, { "name": "right", "displayName": "IMAGE_RIGHT_LAYOUT" }, { "name": "top", "displayName": "IMAGE_TOP_LAYOUT" } ],
如果针对定制组件打开“设置”面板,则会看到一个用于在布局之间进行切换的选项。为了使组件能够对选择中的更改做出反应,render.js 文件提供了相应代码来获取当前所选值并监听对此值的更改。
编辑 render.js
文件并查看 SampleComponentViewModel
对象。
有一个 layout
可观察项(在模板对其进行引用):
self.layout = ko.observable();
每当此值更改时,都有一个更新函数要处理:
self.updateComponentLayout = $.proxy(function (componentLayout) { var layout = componentLayout ? componentLayout : 'default'; self.layout(layout); self.alignImage(layout === 'right' ? 'right' : 'left'); self.showTopLayout(layout === 'top'); self.showStoryLayout(layout === 'default' || layout === 'right'); self.componentLayoutInitialized(true); }, self);
初始化代码获取布局的原始值并调用更新函数:
SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
属性更改监听程序检查对此属性的任何更改并调用更新函数:
self.updateSettings = function (settings) { if (settings.property === 'componentLayout') { self.updateComponentLayout(settings.value); } else if (settings.property === 'customSettingsData') { self.updateCustomSettingsData(settings.value); } }; SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));
最后,sampleComponentTemplate
模板对象提供了相应代码来反映此值的更改:
'<!-- ko if: alignImage() === \'right\' -->' +
总之,通过这些更改,您可以在“设置”面板中选择布局并更新组件。
检查步骤 11 的结果
刷新站点中的页,以便站点构建器能够获取对组件的更改。
让页进入编辑模式。
将组件拖放到页上。
针对组件打开“设置”面板。
从布局属性中选择图像居右。
此时,组件将更新来显示 "<scs-image>"
组件。
继续执行步骤 12:定义定制样式。