Django: как иметь динамические значения в отдельных файлах javascript?

Question

Я бы хотел сохранить логику JavaScript в отдельных файлах из шаблонов Django. Однако некоторая логика содержит динамические значения, которые я хотел бы по-прежнему отображать как шаблоны. Например, ajax-вызовы будут содержать URL

url: "{% url 'app:list' %}",

Когда скрипт находится непосредственно в шаблоне, он заменяется соответствующим URL-адресом. Когда код находится в отдельном файле .js и включен следующим образом:

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

URL-адрес не заменяется, и код отображается таким, какой он есть. Как это решить? Спасибо

Answer 1

Нет способа передать переменные через внедренный js-файл.
Но вы можете решить эту проблему 3 другими способами:

Solution 1 Запишите необходимый js-код в html

<script>
  ...
  {% if this_is_true %}
      // do your code when true
  {% else %}
      // do your code when false
  {% endif %}
  ...
</script>

---

Solution 2: Загрузка отдельного файла по условию

{% if this_is_true %}
   <script src="{% static 'render/this/file.js' %}">
{% else %}
   <script src="{% static 'another/file.js' %}">
{% endif %}

---

Solution 3: Объявление переменных, затем доступ к нему из файла js

<script>
  {% if this_is_true %}
      const x = true;
  {% else %}
      const x = false;
  {% endif %}
</script>

<script src="{% static 'my/js/file.js' %}">

Answer 2

Один из возможных способов сделать это - установить динамические значения в шаблоне перед тегом <script src="..."/>.

Например, в вашем файле list.js:

// get the data from dataset attributes on html elements
const form = document.querySelector('#contact-form');
const contactURL = form.dataset['url'];

// or from a variable on the page
const alternateURL = window.AppURLS['alternate'];

Затем в вашем list.html шаблоне django:

<!-- as a dataset attribute on the form (`data-url`) -->
<form id="contact-form" data-url="{% url 'app:list' %}">
  <!-- etc... -->
</form>

<!-- as a variable embedded in the page -->
<script>
  window.AppURLS = {
    alternate: '{% url "app:list" %}'
  };
</script>

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