如何将AEM多字段组件结果从字符串拆分为数组

Question

我使用多字段功能在AEM中创建了一个自定义组件。但是，它会自动将值放在一个长字符串中，字符串之间用逗号分隔。

我已经使用自定义JS文件获得了数组中的值，但仍然不知道如何将它们分离或列出。

我不确定我是否可以在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 />"
}

但每次都会出错

Answer 1

我通常会避开WCM使用API，而选择Sling Models，而且在编写本文时，我手头没有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}" />

查看有关数据狡猾重复的文档。

为了使其更加简单，您可以使用开箱即用的properties绑定，并完全跳过WCM use。该类型在JS或HTL代码中的任何位置都没有显式命名，但作为字符串数组(String[])保存在内容存储库中的属性可以由HTL本身处理。如果您在对话框中使用granite/ui/components/foundation/form/multifield，这应该足够了：

<link data-sly-repeat.link="${properties['csspath']}" href="${link}" rel="stylesheet" />

现在，这就解释了如何在HTL中实现你想要做的事情然而，以这种方式输出CSS链接一开始似乎是个可疑的想法

包含CSS文件通常不是AEM项目中的手动过程。相反，您应该将CSS组织到clientlib中，在呈现页面的组件中声明依赖项，并让AEM为您提供正确的CSS和JS代码。