Django Template Variabili e Javascript

Quando eseguo il rendering di una pagina utilizzando il renderer modello Django, posso passare una variabile del dizionario contenente vari valori per manipolarli nella pagina utilizzando {{ myVar }}.

C'è un modo per accedere alla stessa variabile in Javascript (forse usando il DOM, non so come Django renda accessibili le variabili)? Voglio essere in grado di cercare i dettagli utilizzando una ricerca AJAX basata sui valori contenuti nelle variabili trasmesse.

Il {{variable}}viene sostituito direttamente nell'HTML. Fare una vista sorgente; non è una "variabile" o qualcosa del genere. È solo il testo renderizzato.

Detto questo, puoi inserire questo tipo di sostituzione nel tuo JavaScript.

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

Questo ti dà javascript "dinamico".

ATTENZIONE Controllare il ticket n. 17419 per la discussione sull'aggiunta di tag simili nel core di Django e le possibili vulnerabilità XSS introdotte utilizzando questo tag modello con i dati generati dall'utente. Il commento di amacneil discute la maggior parte delle preoccupazioni sollevate nel biglietto.

Penso che il modo più flessibile e pratico per farlo sia quello di definire un filtro template per le variabili che vuoi usare nel codice JS. Ciò consente di garantire che i dati vengano salvati correttamente e di poterli utilizzare con strutture dati complesse, come dicte list. Ecco perché scrivo questa risposta nonostante ci sia una risposta accettata con molti voti positivi.

Ecco un esempio di filtro modello:

// 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))

Questo modello di filtri converte la variabile in stringa JSON. Puoi usarlo così:

// myapp/templates/example.html

{% load js %}

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

Una soluzione che ha funzionato per me sta usando il campo di input nascosto nel modello

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

Quindi ottenere il valore in javascript in questo modo,

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

Come di Django 2.1, una nuova costruita nel tag modello è stato introdotto appositamente per questo caso d'uso: json_script.

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

Il nuovo tag serializzerà in modo sicuro i valori del modello e protegge da XSS.

Estratto di documenti Django:

Emette in modo sicuro un oggetto Python come JSON, racchiuso in un tag, pronto per l'uso con JavaScript.

Ecco cosa sto facendo molto facilmente: ho modificato il mio file base.html per il mio modello e l'ho messo in fondo:

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

quindi quando voglio usare una variabile nei file javascript, creo un dizionario DJdata e lo aggiungo al contesto da un json: context['DJdata'] = json.dumps(DJdata)

Spero che sia d'aiuto!

Per un dizionario, è meglio prima codificare in JSON. È possibile utilizzare simplejson.dumps () o se si desidera convertire da un modello di dati in App Engine, è possibile utilizzare encode () dalla libreria GQLEncoder.

Stavo affrontando un problema simile e la risposta suggerita da S.Lott ha funzionato per me.

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

Tuttavia, vorrei sottolineare qui importanti limiti di attuazione . Se stai pianificando di inserire il tuo codice javascript in un altro file e includerlo nel tuo modello. Questo non funzionerà.

Funziona solo quando il tuo modello principale e il codice javascript si trovano nello stesso file. Probabilmente il team Django può affrontare questa limitazione.

Ho avuto difficoltà anche con questo. A prima vista sembra che le soluzioni di cui sopra dovrebbero funzionare. Tuttavia, l'architettura django richiede che ogni file html abbia le proprie variabili renderizzate (ovvero, {{contact}}è renderizzato contact.html, mentre {{posts}}va ad esempio index.htmle così via). D'altra parte, <script>i tag compaiono dopo l' {%endblock%}in base.htmlda cui contact.htmle index.htmlEredita. Ciò significa fondamentalmente che qualsiasi soluzione compresa

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

è destinato a fallire, perché la variabile e lo script non possono coesistere nello stesso file.

La semplice soluzione che alla fine mi è venuta in mente, e ha funzionato per me, era semplicemente racchiudere la variabile con un tag con id e successivamente riferirla ad essa nel file js, in questo modo:

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

e poi:

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

e sufficiente includere <script src="static/js/somecode.js"></script>nel base.htmlcome al solito. Ovviamente si tratta solo di ottenere il contenuto. Per quanto riguarda la sicurezza, basta seguire le altre risposte.

Per un oggetto JavaScript memorizzato in un campo Django come testo, che deve diventare nuovamente un oggetto JavaScript inserito in modo dinamico nello script on-page, è necessario utilizzare entrambi escapejse JSON.parse():

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

Django escapejsgestisce correttamente la quotazione e JSON.parse()converte nuovamente la stringa in un oggetto JS.

Si noti che se si desidera passare una variabile a uno script .js esterno, è necessario precedere il tag di script con un altro tag di script che dichiari una variabile globale.

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

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

data è definito nella vista come al solito in get_context_data

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

Uso questo modo in Django 2.1 e lavoro per me e in questo modo è sicuro (riferimento) :

Lato Django:

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

Lato HTML:

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

puoi assemblare l'intero script in cui la tua variabile di matrice è dichiarata in una stringa, come segue,

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>"

che genererà una stringa come segue

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

dopo avere questa stringa, è necessario inviarlo al modello

views.py

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

nel modello lo ricevi e lo interpreti in modo letterale come codice htm, appena prima del codice javascript dove ne hai bisogno, ad esempio

modello

{{ prueba|safe  }}

e di seguito è riportato il resto del codice, tenere presente che la variabile da utilizzare nell'esempio è data2

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

in questo modo manterrai il tipo di dati, che in questo caso è un accordo

Ci sono due cose che hanno funzionato per me in Javascript:

'{{context_variable|escapejs }}'

e altro: in views.py

from json import dumps as jdumps

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

e nel codice HTML:

{{ message|safe }}