Variáveis ​​de modelo do Django e Javascript

votos
144

Quando processar uma página usando o modelo renderizador Django, que pode passar de uma variável dicionário contendo vários valores para manipulá-los na página usando ` myVar `.

Existe uma maneira de acessar a mesma variável em JavaScript (talvez usando o DOM, eu não sei como Django faz as variáveis ​​acessível)? Eu quero ser capaz de pesquisar detalhes usando uma pesquisa de AJAX com base nos valores contidos nas variáveis ​​passadas em.

Publicado 18/11/2008 em 14:52
fonte usuário
Em outras línguas...                            


10 respostas

votos
213

A `variable`é substituído directamente no HTML. Faça uma fonte vista; não é uma "variável", ou algo parecido. É só prestado texto.

Dito isto, você pode colocar este tipo de substituição em seu JavaScript.

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

Isto dá-lhe javascript "dinâmico".

Respondeu 18/11/2008 em 15:00
fonte usuário

votos
39

CUIDADO Verifique ticket # 17419 para a discussão sobre a adição de tag semelhante no núcleo Django e possíveis vulnerabilidades XSS introduzidas usando este template tag com gerado pelo usuário de dados. Comentário de amacneil discute a maioria das preocupações levantadas no bilhete.


Eu acho que a maneira mais flexível e prático de fazer isso é para definir um filtro de modelo para as variáveis que pretende utilizar no código JS. Isso permite que você para garantir que seus dados estão devidamente escapou e você pode usá-lo com estruturas de dados complexos, tais como dicte list. É por isso que eu escrevo esta resposta, apesar de há uma resposta aceito com muita upvotes.

Aqui está um exemplo de filtro de template:

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

Este filtros de templates converte variável para string JSON. Você pode usá-lo assim:

// myapp/templates/example.html

{% load js %}

<script type="text/javascript">
    var someVar = {{ some_var | js }};
</script>
Respondeu 28/08/2014 em 01:14
fonte usuário

votos
35

Uma solução que funcionou para mim está usando o campo de entrada oculto no modelo

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

Em seguida, obter o valor em javascript desta forma,

var myVar = document.getElementById("myVar").value;
Respondeu 13/12/2011 em 02:15
fonte usuário

votos
7

Para um dicionário, você é o melhor de codificação para JSON em primeiro lugar. Você pode usar simplejson.dumps () ou se você deseja converter a partir de um modelo de dados no App Engine, você poderia usar encode () da biblioteca GQLEncoder.

Respondeu 20/11/2008 em 09:19
fonte usuário

votos
6

Aqui está o que eu estou fazendo muito facilmente: Eu modifiquei meu arquivo base.html para o meu modelo e colocar isso na parte inferior:

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

então quando eu quiser usar uma variável nos arquivos javascript, eu criar um dicionário DJdata e eu adicioná-lo para o contexto por um json: context['DJdata'] = json.dumps(DJdata)

Espero que ajude!

Respondeu 13/03/2015 em 12:31
fonte usuário

votos
6

Quando a variável é devolvido pelo Django acontece todas as citações em &quot;. Usando {{someDjangoVariable|safe}}causas um erro de Javascript.

Para corrigir esse uso Javascript .replace:

<script type="text/javascript"> 
    var json = "`someDjangoVariable`".replace(/&quot;/g,"\"")
</script>
Respondeu 07/08/2013 em 04:22
fonte usuário

votos
3

Eu estava enfrentando problema simillar e resposta sugerida por S. Lott funcionou para mim.

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

No entanto, gostaria de salientar grande limitação implementação aqui. Se você está planejando para colocar o seu código javascript em arquivo diferente e incluir esse arquivo no seu modelo. Isso não vai funcionar.

Isso funciona somente quando você template principal e código javascript está em mesmo arquivo. Provavelmente equipa django pode resolver esta limitação.

Respondeu 07/10/2015 em 17:03
fonte usuário

votos
2

Eu estive lutando com isso também. Na superfície parece que as soluções acima deve funcionar. No entanto, a arquitetura Django requer que cada arquivo html tem suas próprias variáveis prestados (ou seja, {{contact}}é processado para contact.html, enquanto {{posts}}vai para a ex index.htmle assim por diante). Por outro lado, <script>tags aparecem após a na partir do qual e herdar. Isto significa basicamente que qualquer solução incluindo{%endblock%}base.htmlcontact.htmlindex.html

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

está fadado ao fracasso, porque a variável eo script não podem coexistir no mesmo arquivo.

A solução simples eu finalmente veio com, e funcionou para mim, era simplesmente embrulhar a variável com uma etiqueta com id e mais tarde se referem a ele no arquivo js, ​​assim:

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

e depois:

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

e apenas incluem <script src="static/js/somecode.js"></script>em base.htmlcomo de costume. Claro que isto é apenas cerca de obter o conteúdo. Em relação à segurança, basta seguir as outras respostas.

Respondeu 09/11/2018 em 23:08
fonte usuário

votos
0

Note que se você quiser passar uma variável para um script js externo, então você precisa preceder a sua tag script com outra tag script que declara uma variável global.

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

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

data é definida na vista como habitual no get_context_data

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context
Respondeu 16/10/2018 em 03:57
fonte usuário

votos
0

Para um objeto JavaScript armazenado em um campo Django como texto, que precisa se tornar novamente um objeto JavaScript dinamicamente inserido script em páginas, você precisa usar os dois escapejse JSON.parse():

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

Django escapejslida com a citar corretamente, e JSON.parse()converte a cadeia de volta para um objeto JS.

Respondeu 07/03/2017 em 19:25
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more