javascript - 在html页面中使用sightly使用<script>

Question

我正在尝试将谷歌地图添加到正在使用的组件中。该组件将允许用户选择一个 Assets ，然后从 Assets 属性中获取纬度/经度，然后在谷歌地图中用标记显示位置。

我的 googlemap.html 页面目前包含以下内容。

<div  data-sly-use.ev="Google"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Evernote Asset"
        id="${ev.googleClass || ''}"
        >       

</div>

    <style>
             #map-canvas {
            width: 500px;
            height: 400px;
             }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js"></script>

    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var mapOptions = {
          center: myLatlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

我的Google.java是这样的

public class Google extends WCMUse {
  public void activate () {
    //grab the lat/long properties for the asset
  }

  public String googleClass() {
    if (lat != null && long != null) 
      return "map-canvas";
    else 
      return "";
  }
  public String getLat() {return lat;}
  public String getLng() {return lng:]
}

问题正如你所看到的，我已经对纬度/经度进行了硬编码。如何使用 getter 而不是硬编码从 java 类中获取纬度/经度？

我尝试了以下方法，但不起作用。

<div  data-sly-use.ev="GoogleMap"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Evernote Asset"
        id="${ev.googleClass || ''}"
        >       



    <style>
             #map-canvas {
            width: 500px;
            height: 400px;
             }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js"></script>

    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var myLatlng = new google.maps.LatLng("${ev.lat || ''}","${ev.lng || ''}");
        var mapOptions = {
          center: myLatlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </div>

Answer 1

Sightly 具有开箱即用的 XSS 防护。因此，为了评估表达式，应该使用上下文。

${ev.lat @ context="scriptString"}