Variables de modèle Django et Javascript

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

Question

Lorsque je réalise le rendu d'une page à l'aide du rendu de modèle Django, je peux transmettre une variable de dictionnaire contenant diverses valeurs afin de la manipuler dans la page à l'aide de {{ myVar }}.

Y at-il un moyen d’accéder à la même variable en Javascript (peut-être en utilisant le DOM, je ne sais pas comment Django rend les variables accessibles)? Je souhaite pouvoir rechercher des détails à l'aide d'une recherche AJAX en fonction des valeurs contenues dans les variables transmises.

Était-ce utile?

La solution

Le {{variable}} est substitué directement au HTML. Faire une vue source; ce n'est pas une & "variable &"; ou quelque chose comme ça. C'est juste un texte rendu.

Cela dit, vous pouvez mettre ce type de substitution dans votre JavaScript. 

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

Ceci vous donne & "dynamique &"; javascript.

Autres conseils

ATTENTION : vérifiez le ticket # 17419 pour en savoir plus sur l'ajout d'un tag similaire. dans Django core et les vulnérabilités XSS possibles introduites en utilisant cette balise de modèle avec les données générées par l'utilisateur. Le commentaire de amacneil traite de la plupart des problèmes soulevés dans le ticket.

Je pense que la manière la plus souple et la plus pratique de procéder consiste à définir un filtre de modèle pour les variables que vous souhaitez utiliser dans le code JS. Cela vous permet de vous assurer que vos données sont correctement sauvegardées et que vous pouvez les utiliser avec des structures de données complexes, telles que dict et list. C’est pourquoi j’écris cette réponse malgré une réponse acceptée avec de nombreux votes positifs.

Voici un exemple de filtre de modèle: 

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

Ce modèle filtre les variables converties en chaîne JSON. Vous pouvez l'utiliser comme suit: 

// myapp/templates/example.html

{% load js %}

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

Une solution qui a fonctionné pour moi consiste à utiliser le champ de saisie masqué dans le modèle 

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

Puis obtenir la valeur en javascript de cette façon, 

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

Lorsque la variable est renvoyée par Django, toutes les citations sont transformées en &quot;. L'utilisation de {{someDjangoVariable|safe}} provoque une erreur Javascript.

Pour corriger cette utilisation, utilisez Javascript .replace: 

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

Pour un dictionnaire, il est préférable d’encoder d’abord en JSON. Vous pouvez utiliser simplejson.dumps () ou, si vous souhaitez convertir un modèle de données dans App Engine, vous pouvez utiliser encode () à partir de la bibliothèque GQLEncoder.

Depuis Django 2.1, une nouvelle balise de modèle intégrée a été introduite spécifiquement pour ce cas d'utilisation: json_script.

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

La nouvelle balise sérialisera en toute sécurité les valeurs des modèles et protégera contre XSS.

Voici ce que je fais très facilement: J'ai modifié mon fichier base.html pour mon modèle et l'ai placé en bas: 

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

puis quand je veux utiliser une variable dans les fichiers javascript, je crée un dictionnaire DJdata et je l'ajoute au contexte par un json: context['DJdata'] = json.dumps(DJdata)

J'espère que ça aide!

Je faisais face au même problème et la réponse suggérée par S.Lott a fonctionné pour moi. 

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

Toutefois, je voudrais signaler ici les limitations majeures en matière d'implémentation . Si vous envisagez de placer votre code javascript dans un fichier différent et d'inclure ce fichier dans votre modèle. Cela ne fonctionnera pas.

Ceci ne fonctionne que lorsque votre modèle principal et votre code javascript sont dans le même fichier. L'équipe de Django peut probablement résoudre ce problème.

J'ai eu du mal avec ça aussi. En surface, il semble que les solutions ci-dessus devraient fonctionner. Cependant, l'architecture django requiert que chaque fichier HTML ait ses propres variables rendues (autrement dit, {{contact}} est restitué en contact.html, tandis que {{posts}} passe par exemple à index.html et ainsi de suite). Par contre, les balises <script> apparaissent après le {%endblock%} dans base.html duquel <script src="static/js/somecode.js"></script> et <=> héritent. Cela signifie essentiellement que toute solution, y compris 

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

est voué à l'échec, car la variable et le script ne peuvent pas coexister dans le même fichier.

La solution simple que j'ai finalement trouvée et que j'ai travaillée consistait simplement à envelopper la variable avec une balise avec id et à y faire référence par la suite dans le fichier js, comme suit: 

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

et ensuite: 

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

et incluez simplement <=> dans <=> comme d'habitude. Bien entendu, il s’agit uniquement de récupérer le contenu. En ce qui concerne la sécurité, suivez simplement les autres réponses.

Pour un objet JavaScript stocké dans un champ Django en tant que texte, qui doit redevenir un objet JavaScript inséré de manière dynamique dans un script sur page, vous devez utiliser escapejs et JSON.parse():

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

Django <=> gère correctement la citation et <=> reconvertit la chaîne en objet JS.

Notez que si vous souhaitez passer une variable à un script .js externe, vous devez faire précéder votre balise de script avec une autre balise de script déclarant une variable globale. 

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

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

data est défini dans la vue comme d'habitude dans le get_context_data 

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top