Лучшая практика для Javascript, который требует контекстных переменных в Django - PullRequest
Новая
       29

Лучшая практика для Javascript, который требует контекстных переменных в Django

0 голосов
/ 08 октября 2018

До сих пор я включал скрипты в свои шаблоны, используя {% load static%} и имея код javascript в статическом каталоге, отделенный от html-файлов, потому что я думал, что это лучшая практика.

Но все больше и больше мне нужно использовать контекстные переменные в javascript.Поскольку теги шаблона нельзя напрямую интегрировать в отдельные статические файлы javascript (насколько я знаю), я импортировал эти значения в javascript из отображаемого шаблона с помощью селекторов.Например: 

<!--template.html-->
<div id="url_ajax" style="display:none">{% url 
"images:products" %}</div>
{%load static%}
<script src="{% static "js/ajax.js" %}"></script>

/*Ajax.js*/
url_ajax = document.getElementById("url_ajax").innerHTML
$.post(url_ajax, {
      rankit: this.rankit,
      pd: JSON.stringify(pd)
    },
    function(data) {
      if (data['status'] == 'ok') {
        [...]
      }
    }
  );

Хотя это работает, я чувствую, что это не очень хорошая практика из-за соображений безопасности или масштабируемости.Но я не знаю другого способа интеграции переменных контекста в javascript вместо интеграции кода javascript непосредственно в шаблон, что не является хорошим подходом, если этот код будет использоваться во многих шаблонах.

Как ученик Django, я хотел бы знать, какой подход наиболее часто используется в этих ситуациях: отдельные файлы javascript, которые получают переменные контекста из отрендеренного шаблона, код javascript, вставленный непосредственно в шаблон html, или третийподход, который я не знаю?

1 Ответ

0 голосов
/ 09 октября 2018

Мне не очень нравится ваше решение, нет необходимости создавать дополнительный элемент html для передачи переменной django и чтения ее из JS.Это подвержено ошибкам и добавляет ненужные HTML-элементы в вашу DOM.

Вместо этого я рекомендую два решения:

Решение 1

Используйте сценарий JS в своем шаблоне, где вы будете выгружать переменные JS, а затем использоватьих прямо из ваших файлов JS.Чтобы сделать это, у меня обычно будет скрипт внутри моего шаблона до моего пользовательского кода JS, где я определяю глобальный объект JS, содержащий все переменные Django, например: 

    <script>
        var g_django = {
            url1: '{% url "the_first_url" %}',
            url2: '{% url "the_second_url" %}',
            image: '{% static "images/an_image" %}'
        }
    </script>
    <script src='{% static "js/ajax.js" %}'></script>

ТеперьЯ могу использовать g_django.url1, g_django.image и т. Д. Внутри скрипта js/ajax.js.Это можно использовать, если у вас мало вещей, которыми вы должны делиться между django и JS.

Solution 2

Если у вас есть больше вещей, которыми вы должны поделитьсямежду Django и js, и вы хотите иметь лучший контроль, вы можете создать шаблон JS-Django, т.е. создать обычный файл JS внутри вашей папки шаблонов.Затем этот файл может быть либо включен в тег <script> (см. Мой ответ здесь, чтобы найти аналогичное решение с помощью css: Django Использовать URL-адрес статических файлов в статических файлах ), либо еще лучше использовать его как обычный djangoпросмотр через TemplateView.Таким образом, вы создадите файл с именем django_data.js в папке templates, в который вы напишите код JS, смешанный с переменными django, например, его содержимое может быть примерно таким: 

    var g_django = {
        url1: '{% url "the_first_url" %}',
        url2: '{% url "the_second_url" %}',
        image: '{% static "images/an_image" %}'
    }

Этот файлЗатем нужно будет включить его в ваш urls.py через TemplateView примерно так: 

class django.views.generic.base.TemplateView

urlpatterns = [
    path('django_data_js/', TemplateView.as_view(template='django_data.js', content_type='application/javascript'), name='django_data_js' ),
]

Теперь вы можете посетить django_data_js /, чтобы взглянуть на ваши переменные JS и убедиться, что все отображается правильно иКонечно, вы можете включить его (как шаблон) в свои сценарии, например так: 

    <script src='{% url "django_data_js" %}'></script>
    <script src='{% static "js/ajax.js" %}'></script>

Обратите внимание на разницу между включением template-js (с использованием url) и включением обычного статического файла (с использованием * 1041)*).После этого вы сможете использовать g_django изнутри вашего js/ajax.js.

...