Playframework: Elegant way to pass values to javascript

Question

Does anyone have an elegant solution to pass server values to javascript (that is not inline) in playframework? just like ${x} or &{'x'} inside html

Currently I can think of

  <script type="text/javascript">
     var x= ${x};
  </script>
  <script src="/public/javascripts/jsThatUsesX.js" type="text/javascript" ></script>

I'm thinking there is a better solution from play

Answer 1

It's not pretty, but that's the way I always end up doing it.

If the values that you're passing to JavaScript describe something in the DOM, you might consider using HTML 5 data attributes to place that information in the HTML. Then you can retrieve it with getAttribute. e.g. If your page is a blog post and you need to store the post ID you could use

<div class="post" data-post-id="77">
   ...
</div>

That way the data is separated out from the logic and you don't need to inline any JavaScript. You could also use a hidden form field.

Answer 2

What's wrong with that? I found myself doing things like

<script>
   var trades = [${_trades.collect {models.Trade t -> t.price}.join(", ")}];
   // ...
</script>

I like it the groovy way ;)