n.b. см. обновление 2018 внизу
Я рекомендую не добавлять много JavaScript в ваши шаблоны Django - его сложно писать и отлаживать, особенно по мере расширения вашего проекта. Вместо этого попробуйте написать весь свой JavaScript в отдельном файле сценария, который загружает ваш шаблон, и просто включить в шаблон только объект данных JSON. Это позволяет вам выполнять такие вещи, как запуск всего приложения JavaScript через что-то вроде JSLint , минимизацию его и т. Д., И вы можете протестировать его в статическом HTML-файле без каких-либо зависимостей в приложении Django. Использование такой библиотеки, как simplejson, также экономит время, затрачиваемое на написание утомительного кода сериализации.
Если вы не предполагаете, что создаете приложение AJAX, это может быть сделано просто так:
По виду:
from django.utils import simplejson
def view(request, …):
js_data = simplejson.dumps(my_dict)
…
render_template_to_response("my_template.html", {"my_data": js_data, …})
В шаблоне:
<script type="text/javascript">
data_from_django = {{ my_data }};
widget.init(data_from_django);
</script>
Обратите внимание, что тип данных имеет значение: если my_data - это простое число или строка из контролируемого источника, который не содержит HTML, такого как отформатированная дата, никакой специальной обработки не требуется. Если есть возможность получить ненадежные данные, предоставленные пользователем, вам необходимо очистить их, используя что-то вроде escape или escapejs , и убедитесь, что ваш JavaScript безопасно обрабатывает данные, чтобы избежать межсайтовый скриптинг атак.
Что касается дат, вы также можете подумать о том, как вы проводите даты. Я почти всегда считал, что проще всего передавать их как метки времени Unix:
В Джанго:
time_t = time.mktime(my_date.timetuple())
В JavaScript, если вы сделали что-то вроде time_t = {{ time_t }} с результатами приведенного выше фрагмента:
my_date = new Date();
my_date.setTime(time_t*1000);
Наконец, обратите внимание на UTC - вам нужно, чтобы функции даты Python и Django обменивались данными в UTC, чтобы избежать смущающих сдвигов от местного времени пользователя.
РЕДАКТИРОВАТЬ: Обратите внимание, что setTime в javascript находится в миллисекундах, тогда как вывод time.mktime составляет секунды. Вот почему нам нужно умножить на 1000
2018 Обновление: мне все еще нравится JSON для сложных значений, но за прошедшее десятилетие API данных HTML5 достиг почти универсальной поддержки браузера , и это очень удобно для передачи простых (не список / dict) значений, особенно если вы хотите, чтобы правила CSS применялись на основе этих значений, и вам не нужны неподдерживаемые версии Internet Explorer.
<div id="my-widget" data-view-mode="tabular">…</div>
let myWidget = document.getElementById("my-widget");
console.log(myWidget.dataset.viewMode); // Prints tabular
somethingElse.addEventListener('click', evt => {
myWidget.dataset.viewMode = "list";
});
Это отличный способ представить данные в CSS, если вы хотите установить начальное состояние просмотра в шаблоне Django и автоматически обновлять его, когда JavaScript обновляет атрибут data-. Я использую это для таких вещей, как скрытие виджета прогресса до тех пор, пока пользователь не выберет что-то для обработки или для условного отображения / скрытия ошибок на основе результатов выборки, или даже для отображения количества активных записей с использованием CSS, например #some-element::after { content: attr(data-active-transfers); }.