列表元素如何在<script>下循环播放？

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)
    };
});

对于良好的关注点分离更好的方法是完全避免内联脚本,这也将消除这里所需的令人担忧的上下文="不安全".最好的方法是将其放入数据属性中,这是为此精确制作的.所以你的模板看起来如下:

<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