Question

我正在尝试实现一些我希望相对简单的东西...我有一个组件（让我们称之为包装器组件），它包含另一个组件（让我们称之为内部组件）通过数据狡猾-resource标签：

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

我想用这个标签传递一些额外的参数，特别是一个可以在内部组件模板中明亮地拾取的参数？我试图指定是否根据通过data-sly-resource调用组件时传入的参数来解包内部模板外部html标记。

在试验和仔细阅读文档之后，我无法找到实现这一目标的方法。

有人知道这是否可行？

非常感谢，

戴夫

Answer 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不是选项，请将此视为解决方法。

Answer 2

在数据狡猾包含和数据狡猾资源上有一个更新的功能request-attributes can be set：

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

不幸的是，似乎不可能用HTL（= Sightly）表达式构造Map，而且我没有看到从HTL读取请求属性的方法，所以你仍然需要一些Java / Js代码这一点。

Answer 3

不幸的是，没有。没有办法延长功能。您无法添加新的数据狡猾属性或修改现有属性。您可以做的最好的事情是使用USE API

编写自己的帮助程序

Answer 4

如果您只需要在不同情况下从内部组件中包装html或将其包装，则只需将html保留在组件中即可，并仅使用语法将其包装：

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

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

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

检查内部组件中选择器的语法为：

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

或

if something:
    for _ in [0]:
        # Get x
        if not x:
            continue

        # Get y
        if not y:
            continue

        # Get z
        if not z:
            continue

        # Stuff that depends on x, y, and z

AEM 6.0：使用data-sly-resource时的附加参数？

4 个答案: