2012-06-22 3 views
5

Estoy desarrollando una aplicación de pirámide simple en la que estoy usando JQuery para hacer solicitudes AJAX. Hasta ahora tenía mi código de JavaScript dentro de mis plantillas de camaleón. Ahora quiero extraer mi javascript en otra ubicación (por ejemplo, como recursos estáticos).Plantillas de camaleón para archivos javascript?

Mi problema es que no encuentro mi código JavaScript se basa en el contenido generado dinámicamente, así:

$.post("${request.route_url('my_view')}",{'data': 'some data'}, function(html){ 
    $("#destination").html(html); 
}); 

El ser elemento dinámico:

"${request.route_url('my_view')}" 

Qué está llamando el método route_url del objeto de la petición dentro de la plantilla.

¿Existe un patrón reconocido para separar tales archivos javascript en sus propias plantillas y proporcionar rutas y vistas para ellos o simplemente guardo mi javascript en la plantilla de mi página?

Respuesta

9

Sí; generalmente pone información específica del contexto como rutas expandidas en las plantillas y accede a esta información desde sus bibliotecas de JavaScript (estáticas).

Incluyendo la información de contexto se puede hacer de varias maneras, dependiendo del gusto:

  1. Se puede usar un atributo de datos en una etiqueta en el código HTML generado:

    <body data-viewurl="http://www.example.com/route/to/view"> 
        ... 
    </body> 
    

    que luego se , en su carga de código JS estático con el jQuery .data() function:

    var viewurl = $('body').data('viewurl'); 
    
  2. Utilice un LINK tag relación maquillada para incluir enlaces en la cabeza documento:

    <head> 
        <link rel="ajax-datasource" id="viewurl" 
          href="http://www.example.com/route/to/view" /> 
        ... 
    </head> 
    

    que se puede recuperar usando $('link#viewurl').attr('href'), o $('link[rel=ajax-datasource]').attr('href'). Esto solo funciona para la información de URL.

  3. generan las variables JS recta en su plantilla, se pueden consultar desde su código estático:

    <head> 
        ... 
        <script type="text/javascript"> 
         window.contextVariables = { 
          viewurl = "http://www.example.com/route/to/view", 
          ... 
         }; 
        </script> 
    </head> 
    

    y estas variables son atribuibles directamente con contextVariables.viewurl.

+0

Gran respuesta, gracias. –

+0

Fui por la opción 2 ya que parece ajustarse a lo que estoy haciendo mejor. –

Cuestiones relacionadas