如何将 AEM 多字段组件结果从字符串拆分为数组
How can I split AEM multifield component results from a string to an array
我使用多字段功能在 AEM 中创建了一个自定义组件。但是,它会自动将值放在一个长字符串中,中间用逗号分隔。
我已经使用自定义 JS 文件获取了数组中的值,但仍然不知道如何将它们分开或列出。
我不确定我是否可以在我的 JS 文件或引用 JS 的 HTL 文件的循环中使用 data-sly-repeat 或 data-sly-list
我希望每个值都是一个单独的 link 标记,并将输入的值作为 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 使用 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 元素,因此这是不必要的步骤。
相反,return 数组并在您的 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 代码中的任何地方都没有明确命名,但是作为字符串数组 (String[]
) 保存在内容存储库中的属性可以由 HTL 本身处理。如果您在对话框中使用 granite/ui/components/foundation/form/multifield
,这应该足够了:
<link data-sly-repeat.link="${properties['csspath']}" href="${link}" rel="stylesheet" />
现在,这解释了如何实现您在 HTL 中尝试做的事情...但是,以这种方式输出 CSS 链接首先似乎是一个可疑的想法。
包含 CSS 文件通常不是 AEM 项目中的手动过程。您应该做的是将 CSS 组织成 clientlibs,在呈现页面的组件中声明依赖项,并让 AEM 为您提供正确的 CSS 和 JS 代码。
我使用多字段功能在 AEM 中创建了一个自定义组件。但是,它会自动将值放在一个长字符串中,中间用逗号分隔。
我已经使用自定义 JS 文件获取了数组中的值,但仍然不知道如何将它们分开或列出。
我不确定我是否可以在我的 JS 文件或引用 JS 的 HTL 文件的循环中使用 data-sly-repeat 或 data-sly-list
我希望每个值都是一个单独的 link 标记,并将输入的值作为 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 使用 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 元素,因此这是不必要的步骤。
相反,return 数组并在您的 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 代码中的任何地方都没有明确命名,但是作为字符串数组 (String[]
) 保存在内容存储库中的属性可以由 HTL 本身处理。如果您在对话框中使用 granite/ui/components/foundation/form/multifield
,这应该足够了:
<link data-sly-repeat.link="${properties['csspath']}" href="${link}" rel="stylesheet" />
现在,这解释了如何实现您在 HTL 中尝试做的事情...但是,以这种方式输出 CSS 链接首先似乎是一个可疑的想法。
包含 CSS 文件通常不是 AEM 项目中的手动过程。您应该做的是将 CSS 组织成 clientlibs,在呈现页面的组件中声明依赖项,并让 AEM 为您提供正确的 CSS 和 JS 代码。