Variables de plantilla de Django y Javascript

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

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

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

Dicho esto, puede poner este tipo de sustitución en su JavaScript.

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

Esto le proporciona javascript "dinámico".

PRECAUCIÓN Verifique el boleto # 17419 para obtener información sobre cómo agregar etiquetas similares al núcleo de Django y posibles vulnerabilidades XSS introducidas mediante el uso de esta etiqueta de plantilla con datos generados por el usuario. El comentario de amacneil analiza la mayoría de las preocupaciones planteadas en el boleto.

Creo que la forma más flexible y práctica de hacerlo 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 escapen correctamente y puede usarlos con estructuras de datos complejas, como dicty 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))

Esta plantilla filtra convierte la variable a una 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 }}">

Luego obteniendo el valor en javascript de esta manera,

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

A partir de Django 2.1, una nueva construida en etiqueta de plantilla se ha introducido específicamente para este caso de uso: json_script.

https://docs.djangoproject.com/en/3.0/ref/templates/builtins/#json-script

La nueva etiqueta serializará de forma segura los valores de plantilla y protege contra XSS.

Extracto de Django docs:

Produce de forma segura un objeto Python como JSON, envuelto en una etiqueta, listo para usar con JavaScript.

Esto es lo que estoy haciendo muy fácilmente: modifiqué mi archivo base.html para mi plantilla y lo puse 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 eso ayude!

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

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 aquí una importante limitación de implementación . Si planea poner su código javascript en un archivo diferente e incluir ese archivo en su plantilla. Esto no funcionara.

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.

He estado luchando con esto también. En la superficie, parece que las soluciones anteriores deberían funcionar. Sin embargo, la arquitectura django requiere que cada archivo html tenga sus propias variables renderizadas (es decir, {{contact}}se procesa en contact.html, mientras que {{posts}}va a, por ejemplo, index.htmletc.). Por otro lado, <script>las etiquetas aparecen después de la {%endblock%}en base.htmlde la cual contact.htmly index.htmlheredar. Esto básicamente significa que cualquier solución que incluya

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

está destinado a fallar, porque la variable y el script no pueden coexistir en el mismo archivo.

La solución simple que finalmente se me ocurrió, y funcionó para mí, fue simplemente envolver la variable con una etiqueta con id y luego referirme a ella en el archivo js, ​​así:

// index.html
<div id="myvar">{{ myVar }}</div>

y entonces:

// somecode.js
var someVar = document.getElementById("myvar").innerHTML;

y basta con incluir <script src="static/js/somecode.js"></script>en base.htmlla forma habitual. Por supuesto, esto solo se trata de obtener el contenido. Con respecto a la seguridad, solo siga las otras respuestas.

Para un objeto JavaScript almacenado en un campo de Django como texto, que debe volver a convertirse en un objeto JavaScript insertado dinámicamente en el script de la página, debe usar ambos escapejsy JSON.parse():

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

Django escapejsmaneja la cita correctamente y JSON.parse()convierte la cadena de nuevo en un objeto JS.

Tenga en cuenta que si desea pasar una variable a un script .js externo, debe preceder su etiqueta de script con otra etiqueta de script que declare una variable global.

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

<script type="text/javascript" src="{% static "scripts/my_script.js" %}"></script>

data se define en la vista como de costumbre en el get_context_data

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context

Lo uso de esta manera en Django 2.1 y trabajo para mí y de esta manera es seguro (referencia) :

Lado Django:

def age(request):
    mydata = {'age':12}
    return render(request, 'test.html', context={"mydata_json": json.dumps(mydata)})

Lado HTML:

<script type='text/javascript'>
     const  mydata = {{ mydata_json|safe }};
console.log(mydata)
 </script>

puede ensamblar todo el script donde su variable de matriz se declara en una cadena, de la siguiente manera,

views.py

    aaa = [41, 56, 25, 48, 72, 34, 12]
    prueba = "<script>var data2 =["
    for a in aaa:
        aa = str(a)
        prueba = prueba + "'" + aa + "',"
    prueba = prueba + "];</script>"

eso generará una cadena de la siguiente manera

prueba = "<script>var data2 =['41','56','25','48','72','34','12'];</script>"

después de tener esta cadena, debe enviarla a la plantilla

views.py

return render(request, 'example.html', {"prueba": prueba})

en la plantilla la recibe e interpreta de manera literaria como código htm, justo antes del código javascript donde lo necesita, por ejemplo

modelo

{{ prueba|safe  }}

y debajo de eso está el resto de su código, tenga en cuenta que la variable a usar en el ejemplo es data2

<script>
 console.log(data2);
</script>

de esa manera mantendrá el tipo de datos, que en este caso es un acuerdo

Hay dos cosas que me funcionaron dentro de Javascript:

'{{context_variable|escapejs }}'

y otros: en views.py

from json import dumps as jdumps

def func(request):
    context={'message': jdumps('hello there')}
    return render(request,'index.html',context)

y en el html:

{{ message|safe }}