Как использовать JavaScript во включенных компонентах в Django?

Вкратце, как использовать JavaScript в компоненте, который затем будет включен в главную страницу?

Стандартный подход в шаблонах Django заключается в создании шаблона base.html, а затем его расширении. Этот базовый шаблон обычно имеет блоки типа content, extra_js и extra_css. Расширенный шаблон выглядит как

{% extend 'base.html' %}

{% block content %}
<div>
   some content
</div>
{% endblock %}

{% block extra_js %}
# some js code here
{% endblock %}

Мне нужно создать компонент, который будет включен на нескольких страницах, и мне нужно использовать JavaScript внутри этого компонента. Я знаю, что он будет включен только на страницы, расширяющие base.html, страница, включающая его, будет выглядеть как

{% extend 'base.html' %}

{% block content %}
<div>
   {% include 'component.html' %}
</div>
{% endblock %}

{% block extra_js %}
# some js code here
{% endblock %}

Однако component.html ничего не знает о блоке extra_js, поскольку он не расширяет base.html, я не могу использовать этот блок в component.html, а если я просто помещу в него код JavaScript, то после рендеринга шаблона любой JavaScript в component.html окажется в середине тела документа, будет выполнен до импорта библиотек типа jQuery и не будет работать. Какой правильный способ обойти это?

Вернуться на верх