Variables de plantilla Django y Javascript

PRECAUCIÓN Check ticket #17419 para la discusión sobre la adición de una etiqueta similar en Django core y posibles vulnerabilidades XSS introducidas mediante el uso de esta etiqueta de plantilla con datos generados por el usuario. Comment de amacneil discute la mayoría de las preocupaciones planteadas en el ticket.

Creo que la forma más flexible y práctica de hacer esto es definir un filtro de plantilla para las variables que desea usar en el código JS. Esto le permite asegurarse de que sus datos se escapan correctamente y puede usarlo 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 a favor.

Aquí hay 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))

Este filtro de plantilla convierte la variable en cadena JSON. Puedes usarlo así:

// myapp/templates/example.html

{% load js %}

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

Una solución que funcionó para mí es usar el campo de entrada oculto en la plantilla

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

Entonces obteniendo el valor en javascript de esta manera,

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

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

Cuando la variable es devuelta por Django convierte todas las comillas en ". Usar {{someDjangoVariable|safe}} causa un error de Javascript.

Para arreglar esto use Javascript .replace:

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

Esto es lo que estoy haciendo muy fácilmente: He modificado mi base.archivo html para mi plantilla y ponlo en la parte inferior:

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

Luego, cuando quiero usar una variable en los archivos javascript, creo un diccionario DJdata y lo agrego al contexto mediante un json: context['DJdata'] = json.dumps(DJdata)

Espero que ayude!

Me enfrentaba a 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 limitación importante de aplicación aquí. Si está planeando poner su código javascript en un archivo diferente e incluir ese archivo en su plantilla. Esto no funcionará.

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

Para un objeto JavaScript almacenado en un campo Django como texto, que necesita convertirse de nuevo en un objeto JavaScript insertado dinámicamente en el script on-page, debe usar escapejs y JSON.parse():

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

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