Variables de plantilla Django y Javascript

Question

Cuando renderizo una página usando el renderizador de plantilla Django, puedo pasar una variable de diccionario que contiene varios valores para manipularlos en la página usando {{ myVar }}.

¿Hay alguna manera de acceder a la misma variable en Javascript (quizás usando el DOM, no sé cómo Django hace que las variables sean accesibles)? Quiero poder buscar detalles utilizando una búsqueda AJAX basada en los valores contenidos en las variables pasadas.

Answer 1

El {{variable}} se sustituye directamente en el HTML. Hacer una fuente de vista; no es una "variable" ni nada por el estilo. Es solo texto renderizado.

Habiendo dicho eso, puede poner este tipo de sustitución en su JavaScript.

<script type="text/javascript"> 
    var a = "{{someDjangoVariable}}"; 
</script> 

Esto le da javascript "dinámico".

Answer 2

Para un diccionario, primero es mejor que codifique a JSON. Puede usar simplejson.dumps() o si desea convertir desde un modelo de datos en App Engine, puede usar encode() desde la biblioteca GQLEncoder.

Answer 3

Una solución que funcionó para mí está utilizando el campo de entrada oculto en la plantilla

<input type="hidden" id="myVar" name="variable" value="{{ variable }}"> 

a continuación, obtener el valor en javascript esta manera,

var myVar = document.getElementById("myVar").value; 

Answer 4

Cuando la variable es devuelto por Django se convierte todas las cotizaciones en ". El uso de {{someDjangoVariable|safe}} provoca un error de Javascript.

Para solucionar este uso Javascript .replace:

<script type="text/javascript"> 
    var json = "{{someDjangoVariable}}".replace(/&quot;/g,"\"") 
</script> 

Answer 5

PRECAUCIÓN Comprobar#17419 billete para la discusión sobre la adición de etiquetas similar en Django núcleo y posibles vulnerabilidades XSS introducidas mediante el uso de esta etiqueta plantilla con los datos generados por el usuario. Comment de amacneil discute la mayoría de las preocupaciones planteadas en el boleto.

---

Creo que la forma más flexible y práctico de hacer esto es definir un filtro de plantilla para las variables que desee utilizar en el código JS. Esto le permite asegurarse de que sus datos se hayan escapado correctamente y que pueda usarlos con estructuras de datos complejas, como dict y list. Es por eso que escribo esta respuesta a pesar de que hay una respuesta aceptada con muchos votos ascendentes.

Aquí es un ejemplo de filtro de plantilla:

// myapp/templatetags/js.py 

from django.utils.safestring import mark_safe 
from django.template import Library 

import json 


register = Library() 


@register.filter(is_safe=True) 
def js(obj): 
    return mark_safe(json.dumps(obj)) 

estos Filtros plantilla convierte variable para cadena JSON. Se puede utilizar de este modo:

// myapp/templates/example.html 

{% load js %} 

<script type="text/javascript"> 
    var someVar = {{ some_var | js }}; 
</script> 

Answer 6

Esto es lo que estoy haciendo con mucha facilidad: he modificado mi base.archivo html para mi plantilla y poner que en el fondo:

{% if DJdata %} 
    <script type="text/javascript"> 
     (function() {window.DJdata = {{DJdata|safe}};})(); 
    </script> 
{% endif %} 

entonces cuando quiero utilizar una variable en los archivos javascript, puedo crear un diccionario DJdata y lo añado al contexto de un JSON: context['DJdata'] = json.dumps(DJdata)

Espero que ayude!

Answer 7

Estaba enfrentando un problema similar y la respuesta sugerida por S.Lott funcionó para mí.

<script type="text/javascript"> 
    var a = "{{someDjangoVariable}}" 
</script> 

Sin embargo, me gustaría señalar principal limitación aplicación aquí. Si planea colocar su código de JavaScript en un archivo diferente e incluir ese archivo en su plantilla. Esto no funcionará

Esto funciona solo cuando la plantilla principal y el código de JavaScript están en el mismo archivo. Probablemente el equipo de django pueda abordar esta limitación.

Answer 8

Para un objeto JavaScript almacenado en un campo de Django como texto, que debe convertirse de nuevo en un objeto JavaScript inserta de forma dinámica en la escritura de páginas, es necesario utilizar tanto escapejs y JSON.parse():

var CropOpts = JSON.parse("{{ profile.last_crop_coords|escapejs }}"); 

de escapejs Django maneja las comillas correctamente, y JSON.parse() convierte la cadena nuevamente en un objeto JS.