Django Variables de Plantilla y Javascript

StackOverflow https://stackoverflow.com/questions/298772

Pregunta

Cuando me hacen una página con el Django plantilla representador, que me puede pasar en un diccionario de la variable que contiene varios valores para manipular en la página utilizando {{ myVar }}.

Es allí una manera de acceder a la misma variable en Javascript (tal vez usando el DOM, no sé cómo Django hace que las variables accesibles)?Quiero ser capaz de buscar los detalles usando AJAX de búsqueda basado en los valores contenidos en las variables pasado.

¿Fue útil?

Solución

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

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

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

Esto le da " dinámico " javascript.

Otros consejos

PRECAUCIÓN Verificación de entradas #17419 para la discusión sobre la adición de etiqueta similar en Django núcleo y las posibles vulnerabilidades XSS introducido por el uso de esta plantilla de la etiqueta con el usuario de los datos generados. Comentario de amacneil discute la mayoría de las inquietudes planteadas en el billete.

Yo creo que lo más flexible y útil manera de hacer esto es definir una plantilla de filtro para las variables que se desea utilizar en el código JS.Esto le permite asegurarse de que sus datos están correctamente escapó y se puede utilizar con estructuras de datos complejas, tales como dict y list.Por eso escribo esta respuesta a pesar de que no se acepta la respuesta con un montón de upvotes.

Aquí es un ejemplo de plantilla de filtro:

// 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 filtros convierte la variable de cadena JSON.Se puede utilizar como 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;

Cuando Django devuelve la variable, convierte todas las comillas en &quot;. El uso de {{someDjangoVariable|safe}} provoca un error de Javascript.

Para solucionar este problema, use Javascript .replace: 

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

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

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

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

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

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 que ayude!

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í importantes limitaciones de implementación . Si planea poner su código 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 javascript están en el mismo archivo. Probablemente el equipo de django pueda abordar esta limitación.

He estado luchando con esto.En la superficie parece que las soluciones deben trabajar.Sin embargo, el django arquitectura requiere que cada archivo html, tiene su propia prestados variables (es decir, {{contact}} se representa a contact.html, mientras que {{posts}} va a, por ejemplo, index.html y así sucesivamente).Por otro lado, <script> etiquetas aparecen después de la {%endblock%} en base.html a partir de la cual contact.html y index.html heredar.Básicamente, esto significa que cualquier solución incluida 

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

está destinada a fracasar, debido a que la variable y la secuencia de comandos no pueden co-existir en el mismo archivo.

La solución simple que finalmente ocurrió, y trabajó para mí, era simplemente ajustar la variable con una etiqueta con el id y luego referirse a ella en el archivo js, así:

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

y luego:

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

y sólo incluyen <script src="static/js/somecode.js"></script> en base.html como de costumbre.Por supuesto, esto es sólo acerca de llegar el contenido.Con respecto a la seguridad, sólo tienes que seguir las otras respuestas.

Para un objeto de JavaScript almacenados en una Django campo de texto, que debe volver a convertirse en un objeto de JavaScript dinámicamente inserta en en la página de secuencia de comandos, es necesario utilizar ambas escapejs y JSON.parse():

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

Django es escapejs maneja los citando correctamente, y JSON.parse() convierte la cadena 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 es habitual en get_context_data 

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top