[play 2.3.9] Invalid character: '@' when Scala template vars inside JS file

[Slim Slam]

Let's say I have some javascript at the bottom of my Scala template file, myfile.scala.html, say, like this:

....
....
....
<script>
$(function() {
 $('#jstree_sch').jstree({
 "plugins": ["checkbox", "contextmenu"],
 "checkbox": {
 "visible": true,
 "whole_node": true,
 "keep_selected_style": false,
 "three_state": true
 },
 "core": {
 "animation": 0,
 "check_callback": true,
 "themes": {
 "stripes": true
 },
 "data": @if (tree == null) { "nothing" } else { @Html(tree) }
 }
 });
});
</script>

This piece of code works great when it's inside a scala template file like myfile.scala.html.

However, if I put this javascript inside a JS file, let's call it tree.js, and include it inside of the

main.scala.html like this:

....
....
....
<script src="@routes.Assets.at("js/tree.js")"></script>

I get an error "SyntaxError: Invalid character: '@'"  from this line above:

"data": @if (tree == null) { "nothing" } else { @Html(tree) }

Is there a way to workaround this issue?

J

[Slim Slam]

To clarify, I'm not getting a compile-time error, I'm getting a JS error when the JS code is executed during regular program execution. It appears that twirl (?) is not

replacing the "@" statement on that line (?).

J

[Slim Slam]

It doesn't appear that any of the Scala that is now inside JS files (as described above) is getting replaced.

There are no obvious errors until the JS is executed and then I see JS syntax errors from lines like:

var mid = @mapobj.id.toString;

Is there something I'm missing here? Doesn't Twirl instantiate the Scala vars whether the Scala is directly in the Scala template or

whether it's inside a JS file that's included by the template?

J

On Thursday, July 16, 2015 at 3:40:37 PM UTC-5, Slim Slam wrote:

[Slim Slam]

"Play doesn't parse template tags inside Javascript files" 

Is this true? Is there no workaround?

J

On Thursday, July 16, 2015 at 3:40:37 PM UTC-5, Slim Slam wrote:

[Slim Slam]

Can someone point me to some documentation that explain why, or why not, you can put Scala

code inside of a Javascript file that's included in a Play template?

J

On Thursday, July 16, 2015 at 3:40:37 PM UTC-5, Slim Slam wrote:

[Naftoli Gugenheim]

On Thu, Jul 16, 2015, 6:10 PM Slim Slam <slima...@gmail.com> wrote:

It doesn't appear that any of the Scala that is now inside JS files (as described above) is getting replaced.

There are no obvious errors until the JS is executed and then I see JS syntax errors from lines like:

var mid = @mapobj.id.toString;

Is there something I'm missing here? Doesn't Twirl instantiate the Scala vars whether the Scala is directly in the Scala template or

whether it's inside a JS file that's included by the template?

Clearly not, right?

A script tag is not an "include." It's something the browser interprets.

The good news is that just like twirl can compile .scala.html files, it can compile .scala.js files.

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To unsubscribe from this group and stop receiving emails from it, send an email to play-framewor...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/2408614b-a586-4373-9f78-aee0ff9b4df0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Slim Slam]

If I move my JS file into the views directory and name it tree.scala.js, the compiler complains immediately:

[error] /mycode/app/views/tree.scala.js:44: '(' expected but ')' found.
[error] "data": @if (tree == null) { "nothing" } else { @Html(tree) }

[Slim Slam]

I don't see why the tree.scala.js file fails to compile. It's a mystery.

The simple workaround seems to be to move the scala code into JS globals.

So, I'm using a poor coding practice in order to make the code more agile and maintainable

overall:

<script>var myGlobalVar = @someScalaVar</script>

<script src="@routes.Assets.at("js/tree.js")"></script>

[Slim Slam]

I'm really not keen o  using JS global vars to fix this problem, but I don't see another simple way to fix things.

J

[Slim Slam]

Why does this throw a syntax error:

"data": @if (tree == null) { "nothing" } else { @Html(tree) }

But this compiles fine:

"data": @if(tree == null) { "nothing" } else { @Html(tree) }




The only difference is the space between "if" and the left paren.

[Naftoli Gugenheim]

Twirl needs a parameter declaration

To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/dbfa9f73-aa89-4e39-82dd-02ac80b3eeda%40googlegroups.com.

[Michael Slinn]

@if(blah) is the documented syntax for Twirl. @if (blah) (with a space between @if and the parenthesized predicate) is not recognized as Twirl. If you don't like that syntax, use another template facility, like PFView or ScalaTags.

[Slim Slam]

Actually, I can't find the documentation where that syntax is indicated. In fact, I can't find much documentation at all.

Anyone have a pointer?

J

[Mike Slinn]

The official Twirl docs are here:
https://www.playframework.com/documentation/2.4.x/ScalaTemplates
Much more detailed docs, with an example Play app that demonstrates the
details: http://www.scalacourses.com/student/showLecture/15

Mike