javascript - <script> in sightly 下的list元素如何循环？

Question

在我的 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";
}

问题

如何替换 markers 中的值<script> 中的变量带有从 getVals() 返回值的标签？

Answer 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