Переменные шаблона Django и Javascript

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

Вопрос

Когда я визуализирую страницу с помощью средства рендеринга шаблонов Django, я могу передать переменную словаря, содержащую различные значения, чтобы манипулировать ими на странице, используя {{ myVar }}.

Есть ли способ получить доступ к той же переменной в Javascript (возможно, с помощью DOM, я не знаю, как Django делает переменные доступными)?Я хочу иметь возможность искать детали с помощью поиска AJAX на основе значений, содержащихся в переданных переменных.

Это было полезно?

Решение

А {{variable}} подставляется непосредственно в HTML.Сделайте просмотр источника;это не «переменная» или что-то в этом роде.Это просто визуализированный текст.

Сказав это, вы можете добавить такую ​​замену в свой JavaScript.

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

Это дает вам «динамический» JavaScript.

Другие советы

ОСТОРОЖНОСТЬ Проверить билет #17419 для обсуждения добавления аналогичного тега в ядро ​​Django и возможных уязвимостей XSS, возникающих при использовании этого тега шаблона с данными, созданными пользователем. Комментарий от amacneil обсуждает большинство проблем, поднятых в заявке.

Я думаю, что наиболее гибкий и удобный способ сделать это — определить шаблонный фильтр для переменных, которые вы хотите использовать в JS-коде.Это позволяет вам быть уверенным, что ваши данные правильно экранированы, и вы можете использовать их со сложными структурами данных, такими как dict и list.Вот почему я пишу этот ответ, несмотря на то, что существует принятый ответ с большим количеством голосов.

Вот пример фильтра шаблона:

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

Фильтры этого шаблона преобразуют переменную в строку JSON.Вы можете использовать его так:

// myapp/templates/example.html

{% load js %}

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

Решение, которое сработало для меня, заключается в использовании скрытого поля ввода в шаблоне 

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

Затем получим значение в javascript таким образом, 

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

Когда переменная возвращается Django, она превращает все кавычки в &quot;. Использование {{someDjangoVariable|safe}} вызывает ошибку Javascript.

Чтобы исправить это, используйте Javascript .replace: 

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

Для словаря лучше всего сначала кодировать в JSON. Вы можете использовать simplejson.dumps () или, если вы хотите конвертировать из модели данных в App Engine, вы можете использовать encode () из библиотеки GQLEncoder.

Начиная с Django 2.1, новый встроенный тег шаблона был введен специально для этого варианта использования: json_script.

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

Новый тег безопасно сериализует значения шаблона и защищает от XSS.

Вот что я делаю очень легко: Я изменил файл base.html для своего шаблона и поместил его внизу: 

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

затем, когда я хочу использовать переменную в файлах javascript, я создаю словарь DJdata и добавляю его в контекст с помощью json: context['DJdata'] = json.dumps(DJdata)

Надеюсь, это поможет!

Я столкнулся с подобной проблемой, и ответ, предложенный С. Лоттом, работал на меня. 

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

Однако я хотел бы указать на основные ограничения реализации здесь. Если вы планируете поместить свой код JavaScript в другой файл и включить этот файл в свой шаблон. Это не сработает.

Это работает только тогда, когда вы используете основной шаблон и код JavaScript в одном файле. Вероятно, команда Django может решить эту проблему.

Я тоже боролся с этим. На первый взгляд кажется, что вышеприведенные решения должны работать. Однако архитектура django требует, чтобы каждый html-файл имел свои собственные отображаемые переменные (то есть {{contact}} отображается в contact.html, а {{posts}} - например, index.html и т. Д.). С другой стороны, теги <script> появляются после {%endblock%} в base.html, от которых наследуются <script src="static/js/somecode.js"></script> и <=>. Это в основном означает, что любое решение, включая 

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

обязательно завершится ошибкой, поскольку переменная и скрипт не могут сосуществовать в одном и том же файле.

Простое решение, которое я в конце концов придумал и сработало для меня, состояло в том, чтобы просто обернуть переменную тегом с id и затем обратиться к нему в файле js, например, так: 

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

а затем: 

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

и просто включите <=> в <=> как обычно. Конечно, речь идет только о получении контента. Что касается безопасности, просто следуйте другим ответам.

Для объекта JavaScript, хранящегося в поле Django в виде текста, который должен снова стать объектом JavaScript, динамически вставляемым в сценарий на странице, необходимо использовать как escapejs, так и JSON.parse(): 

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

Django's <=> правильно обрабатывает цитирование, а <=> преобразует строку обратно в объект JS.

Обратите внимание, что если вы хотите передать переменную внешнему сценарию .js, то перед тегом сценария необходимо добавить другой тег сценария, который объявляет глобальную переменную. 

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

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

data определяется в представлении как обычно в get_context_data 

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top