Abspielen! Framework: Best Practice URLs in separaten JavaScript-Dateien zu verwenden?

Question

Ich bin neu zu organisieren zur Zeit ein Spiel! Projekt, bei dem eine Menge von JS gibt es Code in den HTML-Template-Dateien. Dieser Code sollte auf externe verschoben werden JS-Dateien für eine bessere Lesbarkeit und schnellere Ladezeiten. Jedoch, wenn ich erstellen Sie einfach eine JS-Datei in dem öffentlichen Ordner alle, die @ {Controller.method} Link Ersatz nicht mehr arbeiten. ich war Nachdenken über eine Funktion zur Initialisierung aus der HTML-Aufruf Vorlagen, die nur die erforderlichen URLs wie

liefert

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

dies ist jedoch immer sehr umständlich und fehleranfällig mit einem beliebigen URL Das ist zugegeben. Eine andere Sache ist, dass das L18N auch nicht mehr funktioniert. So was ist die beste Praxis für Szenarien wie diese, wo Sie Ihre JS-Code in einer separaten Datei aber immer noch will URL Generation verwenden, und L18N in Ihrem JS?

Answer 1

In der Hauptvorlage, erzeugt einen 'Javascript-Router', so etwas wie:

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

Und dann in jeder 'static' JavaScript-Datei, verwenden Sie diesen Router:

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

Answer 2

Der Trick ist der Rahmen, um Ihre Javascript zu analysieren, oder CSS oder irgendetwas anderes in den statischen Verzeichnissen. Hier ist eine einfache Lösung.

Fügen Sie einen controllers.StaticParser Controller:

package controllers;
import play.mvc.Controller;

public class StaticParser extends Controller {
    public static void parse(String route) {
        render("/" + route);
    }
}

Um Ihre conf/routes-Datei hinzu:

GET  /parse/{<.*>route} StaticParser.parse

Die regexp in dieser Strecke ist sehr wichtig, sonst kann man nicht hinzufügen Wegfindung auf die Anfrage. Um eine geparste statische Ressource anfordern, wie ein js Skript verwenden:

<script src="/parse/public/javascripts/test.js"
   language="javascript" type="text/javascript" ></script>

Leider können Sie nicht das #{script 'test.js' /} Format verwenden, da der Skript-Tag Looks für die statische Datei. Zu korrigieren, dass irksome-ness, hier ist ein schamloser Hack des Skript-Tages: der #{parsescript 'test.js'/}-Tag. Es sollte /views/tags/parsescript.tag gehen:

{
 *  insert a parsescript tag in the template.
 *  by convention, referred script must be put under /public/javascripts
 *    src     (required)   : script filename, without the leading path "/public/javascripts"
 *    id      (opt.)       : sets script id attribute
 *    charset (opt.)       : sets source encoding - defaults to current response encoding
 *
 *    #{parsescript id:'datepicker' , src:'ui/ui.datepicker.js', charset:'${_response_encoding}' /}
}*
%{
    (_arg ) && (_src = _arg);

    if (!_src) {
        throw new play.exceptions.TagInternalException("src attribute cannot be empty for script tag");
    }
    _src = "/public/javascripts/" + _src
    try {
        _abs = play.mvc.Router.reverseWithCheck(_src, play.Play.getVirtualFile(_src), false);
    } catch (Exception ex) {
        throw new play.exceptions.TagInternalException("File not found: " + _src);
    }
}%
<script type="text/javascript" language="javascript"#{if _id} id="${_id}"#{/if}#{if _charset} charset="${_charset}"#{/if}  src="/parse${_abs}"></script>

Es funktioniert genau wie der #{script /} Tag, sondern analysiert die Datei vor der Rückgabe: #{parsescript 'test.js' /}

Man könnte ebenso schamlos den #{stylesheet /} Tag hackt, aber ich glaube, ich habe schon genug Raum aufgenommen.

---