Jouer! Cadre: Les meilleures pratiques pour utiliser les URL dans les fichiers JavaScript séparés?

Question

Je suis en train de réorganiser une pièce de théâtre! projet où il y a beaucoup de JS code dans les fichiers de modèle HTML. Ce code doit être déplacé vers externe fichiers JS pour une meilleure lisibilité et plus rapide temps de chargement de page. cependant, quand je viens de créer un fichier JS dans le dossier public, tous les @ {} contrôleur.Procédé remplacement de lien ne fonctionnent plus. j'étais penser à appeler une fonction d'initialisation à partir du HTML modèles qui fournit seulement les URL nécessaires comme

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

mais cela devient très lourd et avec une URL sujette aux erreurs qui est ajouté. Une autre chose est que le I18N aussi ne fonctionne plus. Alors quelle est la meilleure pratique pour les scénarios comme ceux-ci, où vous avez votre le code JS dans un fichier séparé, mais veulent toujours utiliser la génération d'URL et I18N dans votre JS?

Answer 1

Dans le modèle principal, générer un 'routeur Javascript', quelque chose comme:

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

Et puis dans un fichier javascript 'statique', utilisez ce routeur:

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

Answer 2

L'astuce est d'obtenir le cadre pour analyser votre javascript ou votre CSS, ou toute autre chose dans les répertoires statiques. Voici une solution facile.

Ajoutez un contrôleur controllers.StaticParser:

package controllers;
import play.mvc.Controller;

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

Pour votre fichier conf/routes ajouter:

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

L'expression rationnelle dans cette voie est très important, sinon vous ne pouvez pas ajouter pathing à la demande. Pour demander une ressource statique analysé, comme un script js, utilisez:

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

Malheureusement, vous ne pouvez pas utiliser le format #{script 'test.js' /}, car la balise de script recherche le fichier statique. Pour corriger cette situation-ness fastidieux, voici un hack éhonté de la balise de script: la balise #{parsescript 'test.js'/}. Il devrait aller à /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>

Il fonctionne exactement comme la balise #{script /}, mais le fichier avant parse retourner: #{parsescript 'test.js' /}

On pourrait pirater également sans vergogne la balise #{stylesheet /}, mais je pense que je l'ai déjà repris assez d'espace.

---