title: How can list elements be looped under <script> in sightly?
body: <p>In my html page I would like to loop through the properties returned by my Java class but do it under <code>&lt;script&gt;</code> tag. </p>
  
  <p>Currently my html page has this:</p>
  
  <pre><code>&lt;div id="map_wrapper"&gt;
  &lt;div    data-sly-use.ev="Foo"
          class="mapping"
          id="${ev.googleClass || ''"
          &gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
     ....
                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]
                ];
    .....
  &lt;/script&gt;
  </code></pre>
  
  <p>My Java Class has following getters:</p>
  
  <pre><code>//returns [0] = "something, -33.89, 151.2" [1] = "beach, -33.9, 15.02" etc.
  public List&lt;String&gt; getVals() {
      return vals;
  }
  
  public String getGoogleClass() {
      if (vals.size() == 0)
          return "";
      return "map_canvas";
  }
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>How can I replace the values in <code>markers</code> variable in <code>&lt;script&gt;</code> tag with values returned from <code>getVals()</code>?</p>