Django-Vorlagenvariablen und Javascript

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

Frage

Wenn ich eine Seite mit dem Django-Vorlagenrenderer rendere, kann ich eine Wörterbuchvariable mit verschiedenen Werten übergeben, um sie auf der Seite zu manipulieren {{ myVar }}.

Gibt es eine Möglichkeit, in Javascript auf dieselbe Variable zuzugreifen (vielleicht über das DOM, ich weiß nicht, wie Django die Variablen zugänglich macht)?Ich möchte in der Lage sein, Details mithilfe einer AJAX-Suche basierend auf den Werten in den übergebenen Variablen nachzuschlagen.

War es hilfreich?

Lösung

Die {{variable}} wird direkt in den HTML ersetzt. Führen Sie eine Ansicht Quelle; es ist kein „Variable“ oder etwas ähnliches. Es ist nur gerenderter Text.

Having said that, Sie diese Art von Substitution in Ihrem JavaScript setzen können. 

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

Das gibt Ihnen "dynamic" javascript.

Andere Tipps

ACHTUNG: Überprüfen Ticket # 17419 für die Diskussion über das Hinzufügen von ähnlichem Tag in Django Kern und mögliche XSS Schwachstellen durch Verwendung dieser Tag-schablone eingeführt mit Benutzerdaten erzeugt. Kommentar von amacneil meisten Bedenken diskutiert im Ticket erhöht.

Ich denke, die flexibelste und praktische Möglichkeit, dies zu tun, ist ein Template-Filter für Variablen definieren Sie in JS-Code verwenden möchten. Auf diese Weise können Sie sicherstellen, dass Ihre Daten richtig übersetzt und Sie können es mit komplexen Datenstrukturen, wie dict und list verwenden. Deshalb habe ich diese Antwort schreiben obwohl es eine akzeptierte Antwort mit viel upvotes ist.

Hier ist ein Beispiel für Schablonenfilter: 

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

Dieses Template Filter wandelt Variable JSON-String. Sie können es wie so verwenden: 

// myapp/templates/example.html

{% load js %}

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

Eine Lösung, die für mich gearbeitet wird, um das versteckte Eingabefeld in der Vorlage mit 

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

Dann bekommen Sie den Wert in Javascript auf diese Weise, 

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

Wenn die Variable von Django zurückgegeben dreht er alle Zitate in &quot;. {{someDjangoVariable|safe}} Mit verursacht einen Fehler Javascript.

Diese Verwendung Javascript .replace zu beheben: 

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

Für ein Wörterbuch, sind Sie am besten die Codierung zu JSON zuerst. Sie können simplejson.dumps () verwenden, oder wenn Sie aus einem Datenmodell in App Engine konvertieren möchten, können Sie kodieren () aus der GQLEncoder Bibliothek verwenden.

Wie von Django 2.1, ein neuen in Template-Tag gebaut wurde speziell für diesen Anwendungsfall eingeführt. json_script

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

Der neue Tag wird sicher Schablonenwert serialisiert und schützt vor XSS.

Hier ist, was ich tue sehr leicht: Ich änderte meine base.html Datei für meine Vorlage und setzte, dass an der Unterseite: 

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

dann, wenn ich eine Variable in den JavaScript-Dateien verwenden möchten, ich erstellen DJdata Wörterbuch und ich fügen Sie es dem Kontext von einem json: context['DJdata'] = json.dumps(DJdata)

Hoffe, es hilft!

Ich war mit Blick auf simillar Frage und Antwort vorgeschlagen von S. Lott für mich gearbeitet. 

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

Allerdings würde Ich mag darauf hinweisen, Haupt Umsetzung Begrenzung hier. Wenn Sie planen, Ihren JavaScript-Code in verschiedener Datei zu setzen und schließen Sie die Datei in Ihrer Vorlage. Das wird nicht funktionieren.

Dies funktioniert nur, wenn Sie Hauptvorlage und Javascript-Code in derselben Datei. Wahrscheinlich django Team kann diese Einschränkung Adresse.

Ich habe auch damit zu kämpfen.Oberflächlich betrachtet scheint es, dass die oben genannten Lösungen funktionieren sollten.Die Django-Architektur erfordert jedoch, dass jede HTML-Datei über eigene gerenderte Variablen verfügt (d. h. {{contact}} wird gerendert contact.html, während {{posts}} geht z.B. index.html und so weiter).Andererseits, <script> Tags erscheinen nach dem {%endblock%} In base.html aus denen contact.html Und index.html erben.Dies bedeutet im Grunde, dass jede Lösung einschließlich 

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

wird zwangsläufig fehlschlagen, da die Variable und das Skript nicht in derselben Datei koexistieren können.

Die einfache Lösung, die mir schließlich einfiel und für mich funktionierte, bestand darin, die Variable einfach mit einem Tag mit der ID zu umschließen und später in der js-Datei darauf zu verweisen, etwa so:

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

und dann:

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

und einfach einschließen <script src="static/js/somecode.js"></script> In base.html wie gewöhnlich.Natürlich geht es hier nur um bekommen der Inhalt.Befolgen Sie in Bezug auf die Sicherheit einfach die anderen Antworten.

Für ein JavaScript-Objekt gespeichert in einem Django-Feld als Text, der wiederum muss ein Objekt dynamisch in On-Page-Skript eingefügt JavaScript werden, müssen Sie sowohl escapejs und JSON.parse() verwenden: 

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

Djangos escapejs behandelt das Zitat richtig und JSON.parse() wandelt die Zeichenfolge wieder in ein JS-Objekt.

Beachten Sie, dass, wenn Sie eine Variable mit einem externen js Skript übergeben wollen, dann müssen Sie Ihren Skript-Tag mit einem anderen Skript-Tag vorangestellt, das eine globale Variable deklariert. 

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

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

data in der Ansicht definiert wie gewohnt im get_context_data 

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top