Giocare! Quadro: Le migliori pratiche per utilizzare gli URL nei file JavaScript separati?

Question

Attualmente sto riorganizzazione di un Play! progetto in cui c'è un sacco di JS codice nei file template HTML. Questo codice deve essere spostato in esterna file JS per una migliore leggibilità e tempi di caricamento della pagina più veloce. Però, quando mi basta creare un file JS nella cartella pubblica, tutte le @ {} Controller.method sostituzioni di collegamento non stanno lavorando. ero pensando di chiamare una qualche funzione di inizializzazione dal HTML i modelli che ha appena forniture gli URL richiesti come

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

ma questo sta diventando molto ingombrante e soggetto a errori con qualsiasi URL che si aggiunge. Un'altra cosa è, che l'I18N anche non funziona più. Così Qual è la migliore pratica per gli scenari come questi, dove avete il vostro il codice JS in un file separato, ma ancora voglia di usare la generazione URL e I18N nella tua JS?

Answer 1

Nel modello principale, generare un 'router Javascript', qualcosa del tipo:

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

E poi in qualsiasi file javascript 'statica', utilizzare questo router:

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

Answer 2

Il trucco è quello di ottenere il quadro per analizzare il vostro javascript, CSS o il vostro, o qualsiasi altra cosa nelle directory statica. Ecco una soluzione facile.

Aggiungi un controller controllers.StaticParser:

package controllers;
import play.mvc.Controller;

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

Per il file conf/routes add:

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

Anche l'espressione regolare in questo percorso è molto importante, altrimenti non è possibile aggiungere pathing alla richiesta. Per richiedere una risorsa statica analizzata, ad esempio uno script js, uso:

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

Purtroppo, non è possibile utilizzare il formato #{script 'test.js' /}, perché gli sguardi tag script per il file statico. Per correggere tale fastidioso-ness, ecco un hack spudorata del tag script: il tag #{parsescript 'test.js'/}. Dovrebbe andare a /views/tags/parsescript.tag:

{
 *  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>

Funziona esattamente come il tag #{script /}, ma analizza il file prima di restituirlo: #{parsescript 'test.js' /}

Si potrebbe altrettanto spudoratamente hackerare il tag #{stylesheet /}, ma penso che ho preso abbastanza spazio già.

---