¡Jugar! Marco: Buenas prácticas para utilizar URL en archivos separados de JavaScript?

Question

Actualmente estoy reorganizando un Play! proyecto en el que hay una gran cantidad de JS código en los archivos de plantilla HTML. Este código debe ser trasladado a externa JS para una mejor legibilidad y los tiempos de carga más rápidos. Sin embargo, cuando acabo de crear un archivo JS en la carpeta pública, toda la @ {} Controller.method reemplazos de enlace ya no están trabajando. yo estaba pensando en llamar a alguna función de inicialización del HTML plantillas que solo suministra la URL solicitada como

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

Sin embargo, esto se está volviendo muy engorroso y propenso a errores con cualquier URL que se añade. Otra cosa es, que la I18N también ya no funciona. Asi que ¿cuál es la mejor práctica para escenarios como estos, donde tiene su JS código en un archivo separado, pero todavía quiere utilizar la generación URL y I18N en su JS?

Answer 1

En la plantilla principal, generar un 'router de Javascript', algo como:

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

Y luego, en cualquier archivo javascript 'estático', utilice este router:

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

Answer 2

El truco es conseguir que el marco para analizar su javascript o CSS, o cualquier otra cosa en los directorios estáticos. Aquí hay una solución fácil.

Añadir un controlador controllers.StaticParser:

package controllers;
import play.mvc.Controller;

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

Para su archivo conf/routes complemento:

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

La expresión regular en esa ruta es muy importante, de lo contrario no se puede agregar encauzamiento a la solicitud. Para solicitar un recurso estático analizada, tal como un script js, utilice:

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

Por desgracia, no se puede utilizar el formato #{script 'test.js' /}, porque las miradas etiqueta script para el archivo estático. Para corregir esa fastidiosa-dad, aquí hay un truco descarada de la etiqueta script: la etiqueta #{parsescript 'test.js'/}. Se debe ir 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>

Funciona exactamente igual que la etiqueta #{script /}, pero analiza el archivo antes de devolverlo: #{parsescript 'test.js' /}

Se podría igualmente descaradamente cortar la etiqueta #{stylesheet /}, pero creo que he tomado suficiente espacio ya.

---