[2.1.0 Scala] Passing data to javascript in templates

Dave Lee

unread,

Feb 14, 2013, 11:12:03 AM2/14/13

to play-fr...@googlegroups.com

I'd like to take scala objects and generate javascript literals in my templates, so that the server can set some page configuration variables that guide the javascript.

I guess the easiest way to approach this is to do something like this:

@(course:Course)

var koncourseCourse = {

id: @course.id,

name: '@course.name',

info: '@course.info'

};

</script>

The problem is that I need to html encode or Jsonify the string or they result in javascript parsing errors. How can I call the JSON methods from a view?

Additionally, is this the best way to accomplish this?

Julien Richard-Foy

unread,

Feb 14, 2013, 5:23:37 PM2/14/13

to play-fr...@googlegroups.com

Hi,

You can just use the JSON API:

@(course: Course)

@import play.api.libs.json.Json

…

var koncourseCourse = @Html(Json.obj(
"id" -> course.id,
"name" -> course.name,
"info" -> course.info
).toString);

If you already defined a JSON Serializer for your Course type you can
just write:

var koncourseCourse = @Html(Json.toJson(course).toString);

Regards

Myyk

unread,

Feb 14, 2013, 7:26:37 PM2/14/13

to play-fr...@googlegroups.com

Yeah, you can just use any of the Json API to convert your objects to Json, even if you don't have a Json Format defined you can use the library to do it more manually.

My code base has a similar requirement. We have a base_template.scala.html which takes several things like a body, jsMain - a .js file location for the page, and a headJs - a snippet of .js which is always put into the head.

So in the <head> of this template, we have:

<head>

..... // skipping some stuff

var Egraphs = Egraphs || {};

Egraphs.page = Egraphs.page || {};

Egraphs.page.jsMain = ["pages/base-template", "@jsMain"];

// skipping some more stuff

@headJs

</script>

@headHtml

</head>

This way we can pass .js as Html to the template and save some of the boilerplate writing on each page and just add to the Egraphs js object we defined in the base_template.

something like this would be defined in the template that calls our base_template.scala.html

@headJs = {

@if(signup) {

Egraphs.page.modalOn = true;

}

Egraphs.page.queryUrl = "@marketplaceRoute";

}

Then our jsMain can access that information off of Egraphs which will always be there.

Hope that helps in some way,

Cheers,

Myyk Seok

Dave Lee

unread,

Feb 14, 2013, 7:46:21 PM2/14/13

to play-fr...@googlegroups.com

Ahh, stupid me. I keep forgetting you can import stuff into html templates. Just started using Scala after too many years of js/php web dev.

My other question is whether this is the recommended way to pass confguration/init data to javascript? It feels a little clunky but I can't see any real (perf/security) reasons not to do this. I guess another option is to go through the cookie. But I'd like to keep my cookies secure, and would rather not have any security keys in the javascript code where it will be exposed.

Thanks.

Reply all

Reply to author

Forward