0

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

我已经使用自定义 JS 文件获取了数组中的值，但仍然无法弄清楚如何将它们分开或列出。

我不确定是否可以在我的 JS 文件的循环中或在引用 JS 的 HTL 文件中通过使用 data-sly-repeat 或 data-sly-list 来完成此操作

我希望每个值都是一个单独的链接标签，输入中的值作为 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 />"
 }

但它每次都会出错

4

1 回答 1

1

我通常会避开 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 元素，因此这是一个不必要的步骤。

相反，返回该数组并在您的 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 链接首先似乎是一个可疑的想法。

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

于 2017-10-29T10:09:44.637 回答