Question

让我们说，我有一个模板A和吊索：resourceType是/ apps / myproject / components / basePage。在这个组件中，我通过body.html略微包含了body.html和header.html以及footer.html脚本。现在我正在创建另一个模板B和sling：resourceType是/ apps / myproject / components / compB和sling：compB的resourceSuperType是/ apps / myproject / components / basePage。在/ apps / myproject / components / compB中我添加了content.html和selector.html

如果我创建了类型模板B的页面（mytest.html），则正确包含页眉和页脚脚本但是当我点击mytest.selector.html时，则不包括页眉和页脚脚本。我想模板B将有两个基于选择器的不同视图。请告诉我我失踪的地方。

Answer 1

我相信您正在尝试在同一模板中包含多个脚本以实现不同的视图。这是AEM中正确的方法。但缺少的部分是你创建第二个脚本（在这种情况下是selector.html）的那一刻，它成为另一个模板，你需要编码以将整个页面脚本包含在这个脚本中。

当您从/ libs / wcm / foundation / components / page组件覆盖脚本时，当您的自定义脚本名称与父组件匹配时，它们将正常工作。例如，您的body.html将覆盖/libs/wcm/foundation/components/page/body.html，并且页面将呈现它的编码方式。当你创建selector.html时，它变成了独立的脚本，因为没有/libs/wcm/foundation/components/page/selector.html。

您需要针对自定义脚本明确定义所有行为（包括页眉，页脚脚本等）。在这种情况下，您需要在header.html中明确包含页眉/页脚脚本

Answer 2

使用选择器意味着您正在使用组件的某些特殊实现。例如，您的组件可能有多个图表，您希望将它们封装在选择器中并通过浏览器中的AJAX使用它，并在主组件中重用这些选择器。

目前，您尝试实现的是将您的页眉和页脚用于打破封装规则的另一个组件。而是执行此操作，取出header.html和footer.html，然后在basePage以及子页面中创建这些单独的组件。

请参阅下面的代码：

<div data-sly-resource="${'header' @ resourceType='/apps/myproject/components/header'}">
<p>Your body and anything you want to put here</p>
<div data-sly-resource="${'footer' @ resourceType='/apps/myproject/components/footer'}">

这样，您甚至可以在选择器中重复使用标题。

如何使用选择器

2 个答案: