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

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

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

156
django django-templates google-app-engine javascript python

8 ответов

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

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

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

это дает вам "динамический" javascript.

223

осторожностью Регистрация билета #17419 для обсуждения добавления аналогичного тега в ядро Django и возможных уязвимостей XSS, введенных с помощью этого тега шаблона с пользовательскими данными. комментарий от amacneil обсуждает большинство проблем, поднятых в билете.

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

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

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

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

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

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

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

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

8

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

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

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

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

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

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

надеюсь, что это помогает!

6

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

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

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

это работает только тогда, когда основной шаблон и код javascript находятся в одном файле. Вероятно, команда django может решить это ограничение.

3

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

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

Джанго escapejs обрабатывает цитирование правильно и JSON.parse() преобразует строку обратно в объект JS.

0