我使用多字段功能在AEM中创建了一个自定义组件。但是,它会自动将这些值放在一个长字符串中,中间用逗号隔开。
我已经使用自定义的JS文件获得了数组中的值,但仍然不知道如何将它们分开或列出。
我不确定是否可以通过使用data-sly-repeat或data-sly-list在JS文件或引用JS的HTL文件的循环内完成此操作
我希望每个值都是一个单独的链接标签,并将输入中的值作为href。
这是js文件:
"use strict";
use(function() {
var csspath = properties["csspath"];
var links = "";
for(var i = 0; i < csspath.length; i++) {
links += csspath[i]
}
return {
linkarray: links
};
});
和引用它的html:
<sly data-sly-use.csslinks="csslinks.js" />
${csslinks.linkarray}
现在的HTML简单地打印出来
test1test2
但我希望它显示为
<link href="test1.css" />
<link href="test2.css" />
无需用户实际输入
<link href=.... />
我试图像这样在JS文件中添加html语法...
for(var i = 0; i < csspath.length; i++) {
links += '<link href="' + csspath[i] + '.css" />'
}
甚至只是
for(var i = 0; i < csspath.length; i++) {
links += csspath[i] + "<br />"
}
但是每次都会出错
最佳答案
我通常避开WCM Use API,转而使用Sling模型,并且在编写本文时手头没有AEM实例,但是这里的一些一般技巧可能对您有所帮助。
在您发布的WCM使用代码中:
"use strict";
use(function() {
var csspath = properties["csspath"];
var links = "";
for(var i = 0; i < csspath.length; i++) {
links += csspath[i]
}
return {
linkarray: links
};
});
您正在基于从页面属性绑定获得的数组构建字符串。由于您的目标始终是构建HTML元素,因此这是不必要的步骤。
而是返回数组并在HTL脚本中对其进行迭代。 HTL是您应该构建表示层的地方。
"use strict";
use(function() {
var cssPaths = properties["csspath"];
return {
linkArray: cssPaths
};
});
然后,在您的HTL脚本中,遍历数组,呈现HTML。
<link data-sly-use.csslinks="csslinks.js"
data-sly-repeat.link="${csslinks.linkArray}" href="${link}" />
请查阅data-sly-repeat上的文档。
为了使其更加简单,您可以使用现成的
properties
绑定,而完全跳过WCM使用。在您的JS或HTL代码中的任何地方都没有明确命名该类型,但是HTL本身可以处理以字符串数组(String[]
)形式存储在内容存储库中的属性。如果在对话框中使用granite/ui/components/foundation/form/multifield
,这应该足够了:<link data-sly-repeat.link="${properties['csspath']}" href="${link}" rel="stylesheet" />
现在,这说明了如何在HTL中实现您要执行的操作...但是,以这种方式输出CSS链接首先看起来像是一个可疑的主意。
在AEM项目中,通常不包括手动添加CSS文件。相反,您应该做的是将CSS组织到clientlibs中,在呈现页面的组件中声明依赖项,并让AEM为您提供正确的CSS和JS代码。