Variáveis ??de modelo Django e Javascript

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

Pergunta

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.

Foi útil?

Solução

O {{variable}} é substituído diretamente no HTML. Faça uma fonte vista; não é uma "variável", ou algo parecido. É só texto processado.

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

Outras dicas

ATENÇÃO Verifique bilhete # 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 com dados gerados utilizador. Comentário partir discute amacneil 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, como dict e list. É por isso que eu escrevo esta resposta, apesar de há uma resposta aceita 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 modelo filtra convertidos 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>

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

Depois de obter o valor em javascript Desta forma, 

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

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

Para corrigir esse uso Javascript .replace: 

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

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.

A partir de Django 2.1, um novo construído em tag modelo foi introduzido especificamente para este caso de uso:. json_script

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

A nova marca será valores do modelo de forma segura serializar e protege contra XSS.

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!

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 importante implementação limitaçã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 django equipe pode resolver esta limitação.

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 por exemplo index.html e assim por diante). Por outro lado, as marcas <script> aparecer após o {%endblock%} em base.html a partir do qual contact.html e index.html herdar. Isto significa basicamente que qualquer solução incluindo 

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

está fadado ao fracasso, porque a variável eo script não podem co-existir 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, em seguida: 

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

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

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 tanto escapejs e JSON.parse(): 

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

alças escapejs do Django a citar corretamente, e JSON.parse() converte a volta string em um objeto JS.

Note que, se você quer 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 está definido no modo de exibição como habitual na get_context_data 

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top