【问题标题】:AEM 6.0: Additional parameters when using data-sly-resource?AEM 6.0:使用 data-sly-resource 时的附加参数?
【发布时间】:2014-10-13 19:40:09
【问题描述】:

我正在尝试实现一些我希望相对简单的东西......我有一个组件(让我们称之为包装器组件),它通过 data-sly 在其中包含另一个组件(让我们称之为内部组件) -资源标签:

<div data-sly-resource="${ 'inner' @ resourceType='/projectname/components/inner' }"></div>

我想通过这个标签传入一些额外的参数,特别是一个可以在内部组件模板中通过视觉拾取的参数?我正在尝试根据通过 data-sly-resource 调用组件时传入的参数来指定是否打开内部模板外部 html 标记。

在尝试并仔细阅读了漂亮的文档之后,我找不到实现这一目标的方法。

有谁知道这是否可行?

非常感谢,

戴夫

【问题讨论】:

标签: aem sightly


【解决方案1】:

如果the alternatives proposed here 不适合您,您可以使用 Use-API 写入和读取请求属性。

两个组件的简单示例,其中外部组件设置属性,然后由内部组件显示:

/apps/siteName/components/
    outer/ [cq:Component]
        outer.html
    inner/ [cq:Component]
        inner.html
    utils/ [nt:folder]
        setAttributes.js
        getAttributes.js
/content/outer/ [sling:resourceType=siteName/components/outer]
    inner [sling:resourceType=siteName/components/inner]

/apps/siteName/components/outer/outer.html:

<h1>Outer</h1>
<div data-sly-use="${'../utils/setAttributes.js' @ foo = 1, bar = 2}"
     data-sly-resource="inner"></div>

/apps/siteName/components/inner/inner.html:

<h1>Inner</h1>
<dl data-sly-use.attrs="${'../utils/getAttributes.js' @ names = ['foo', 'bar']}"
    data-sly-list="${attrs}">
    <dt>${item}</dt> <dd>${attrs[item]}</dd>
</dl>

/apps/siteName/components/utils/setAttributes.js:

use(function () {
    var i;
    for (i in this) {
        request.setAttribute(i, this[i]);
    }
});

/apps/siteName/components/utils/getAttributes.js:

use(function () {
    var o = {}, i, l, name;
    for (i = 0, l = this.names.length; i < l; i += 1) {
        name = this.names[i];
        o[name] = request.getAttribute(name);
    }
    return o;
});

访问 /content/outer.html 时的结果输出:

<h1>Outer</h1>
<div>
    <h1>Inner</h1>
    <dl>
        <dt>bar</dt> <dd>2</dd>
        <dt>foo</dt> <dd>1</dd>
    </dl>
</div>

正如@AlasdairMcLeay 所评论的,如果内部组件被多次包含在请求中,这个提议的解决方案会出现问题:组件的后续实例仍然会看到最初设置的属性。

这可以通过在访问属性时删除属性来解决(在 getAttributes.js 中)。但是,如果内部组件被拆分为多个都需要访问这些属性的 Sightly(或 JSP)文件,这将再次成为问题,因为访问请求属性的第一个文件也会删除它们。

这可以通过一个标志来进一步解决,该标志告诉在访问它们时是否应该删除属性......但它也说明了为什么使用请求属性不是一个好的模式,因为它基本上包括使用全局变量作为组件之间通信的一种方式。因此,如果the other two solutions proposed here 不是一个选项,请将此视为一种解决方法。

【讨论】:

  • 这种方法的一个问题:如果你想传递一个可选属性,并且在页面的其他地方出现相同的组件而不设置这些属性。据我所见,组件的后续实例将加载来自先前 data-sly-resource 的属性。
  • 刚刚意识到我们可以通过在第一次检索到 getAttributes.js(或类似)中的变量来解决这个问题
【解决方案2】:

request-attributes can be set 在 data-sly-include 和 data-sly-resource 上有一个更新的功能:

<sly data-sly-include="${ 'something.html' @ requestAttributes=amapofattributes}" />

不幸的是,似乎无法使用 HTL (=Sightly) 表达式构造 Map,而且我看不到从 HTL 读取请求属性的方法,因此您仍然需要一些 Java/Js 代码那个。

【讨论】:

    【解决方案3】:

    很遗憾,没有。没有办法扩展美观的功能。您不能添加新的 data-sly 属性或修改现有属性。您能做的最好的事情就是使用USE API 编写自己的助手

    【讨论】:

      【解决方案4】:

      如果你只是需要在不同的情况下对你的内部组件中的 html 进行包装或解包,那么你可以只保留组件中的 html 解包,并仅在需要时使用语法进行包装:

      <div data-sly-resource="${ 'inner' @ resourceType='/projectname/components/inner', decorationTagName='div', cssClassName='someClassName'}"></div>
      

      如果您需要更复杂的逻辑,并且需要将值传递给内部组件模板,则可以使用选择器。使用选择器包含资源的语法是:

      <div data-sly-resource="${ 'inner' @ resourceType='/projectname/components/inner', selectors='mySelectorName'}"></div>
      

      检查内部组件中选择器的语法是:

      ${'mySelectorName' in request.requestPathInfo.selectorString}"
      

      ${'mySelectorName' == request.requestPathInfo.selectorString}"
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-03-14
        • 1970-01-01
        • 2016-04-24
        • 1970-01-01
        相关资源
        最近更新 更多