列表元素如何在 <script> 下轻松循环？答案

【问题标题】：How can list elements be looped under <script> in sightly?列表元素如何在 <script> 下轻松循环？
【发布时间】：2015-06-30 17:30:23
【问题描述】：

在我的 html 页面中，我想遍历 Java 类返回的属性，但在 <script> 标记下执行。

目前我的html页面有这个：

<div id="map_wrapper">
<div    data-sly-use.ev="Foo"
        class="mapping"
        id="${ev.googleClass || ''"
        >
</div>
</div>

<script>
   ....
              var markers = [                
          ['Bondi Beach', -33.890542, 151.274856],
          ['Coogee Beach', -33.923036, 151.259052],
          ['Cronulla Beach', -34.028249, 151.157507],
          ['Manly Beach', -33.80010128657071, 151.28747820854187],
          ['Maroubra Beach', -33.950198, 151.259302]
              ];
  .....
</script>

我的 Java 类有以下 getter：

//returns [0] = "something, -33.89, 151.2" [1] = "beach, -33.9, 15.02" etc.
public List<String> getVals() {
    return vals;
}

public String getGoogleClass() {
    if (vals.size() == 0)
        return "";
    return "map_canvas";
}

问题

如何将<script> 标记中markers 变量中的值替换为getVals() 返回的值？

【问题讨论】：

标签： javascript java osgi aem sightly

【解决方案1】：

没有。为了生成 JSON，我会在 Java 中使用 JSONStringer，或者在服务器端 JavaScript 中使用 JSON.stringify，以避免使用模板。

例如，模板文件可以做这样的事情：

<script data-sly-use.logic="logic.js">
    var markers = ${logic.json @ context='unsafe'}
</script>

相应的 logic.js 文件会做：

use(function () {
    var myObj = {
        foo: "bar",
        arr: [1,2,3,4,5,6,7,8,9,10]
    };

    return {
        json: JSON.stringify(myObj)
    };
});

更好的关注点分离是完全避免内联脚本，这也将消除此处需要的令人担忧的 context='unsafe'。最好的方法通常是将其放入专门为此而设计的数据属性中。因此，您的模板将如下所示：

<div id="map_wrapper"
     data-sly-use.logic="logic.js"
     data-markers="${logic.json}">
    ...
</div>

看起来 JSON 会被不必要的转义，但您不必担心它们，HTML 会很好地处理它们。您可以使用 REPL live Sightly 评估环境尝试我上面的示例： https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl

【讨论】：

您的方法看起来更好，但在您的示例中...如何从 java 方法（在我的情况下为 getVals()）填充 json 数组的值？我喜欢你提出的关注点分离，但我真正想要的是能够用 java 类的值填充 JS 数组。
什么 API 构建 getVals 返回的值？这是您必须在 for 循环中调用的内容。或者反过来，你可以在你的 Java 对象中实现另一个 getJsonVals()，它会像我的小 JS 那样构建一个 JSON 字符串。
我正在使用的 Java 类正在扩展 WCMUse 我已将整个 Java 类和 HTML 页面作为要点发布在这里：gist.github.com/Omnipresent/e84477e20985c2b7bcab
谢谢，今晚晚些时候我会看看。
非常感谢。我是新手，有点困惑。当我更详细地阅读您的解决方案时，我认为您建议我使用 JS 作为后端而不是 Java。我更愿意保留 Java，否则我将不得不更改大量代码。

【解决方案2】：

您可以创建一个公开数据的 java slingservlet，并在脚本标签内使用 ajax 访问该 servlet。

Here's a bit of a guide

【讨论】：