步骤 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:结合使用嵌套组件和内嵌编辑