Play! Framework: Best practice to use URLs in separate JavaScript files?

Question

I am currently reorganizing a Play! project where there is a lot of JS code in the HTML template files. This code should be moved to external JS files for better readability and faster page loading times. However, when I just create a JS file in the public folder, all the @{Controller.method} link replacements are no longer working. I was thinking about calling some initialization function from the HTML templates which just supplies the required URLs like

initialize({ "Application.doThis" : "@{Application.doThis}"})

however this is becoming very cumbersome and error-prone with any URL that is added. Another thing is, that the I18N also no longer works. So what is the best practice for scenarios like these, where you have your JS code in a separate file but still want to use URL generation and I18N in your JS?

Answer 1

In the main template, generate a 'Javascript router', something like:

<script>
    var routes = {
        doThis: #{jsAction @Application.doThis(user, ':param1', ':param2') /},
        doThat: #{jsAction @doThat() /}
    } 
</script>

And then in any 'static' javascript file, use this router:

$.get(routes.doThis({param1: x, param2: 'yop'}))