Разделение файла JavaScripts в шаблонах веток symfony4

Question

У меня вопрос о том, как разделить загрузку, указать файл javascript и указать файл шаблона.

Я получил, например, admin.html.twig, который расширяет base.html.twig, в базе я получил

   {% block javascripts %}

      <script src="/assets/js/core/jquery.min.js"></script>
      <script src="/assets/js/core/popper.min.js"></script>
      <script src="/assets/js/core/bootstrap-material-design.min.js"></script>
      <script src="/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>

      <script async defer src="https://buttons.github.io/buttons.j"></script>
      <script src="/assets/js/plugins/chartist.min.js"></script>
      <script src="/assets/js/plugins/bootstrap-notify.js"></script>
      <script src="/assets/js/material-dashboard.min.js"></script>
      <script src="/assets/demo/jquery.sharrre.js"></script>
      <script src="/assets/js/sparkline.js"></script>
      <script src="/assets/js/plugins/chartjs.min.js"></script>
    {% endblock %}

, и я получил следующий файл, такой как dashboard.html.twig, который расширяет файл admin.html.twig, и мой вопрос заключается в том, что в файле dashboard.html.twig я получил небольшой написанный с помощью javascript код и этот javascript, конечно, использует библиотеку jquery, но эту библиотеку я загрузил в файл base.html.twig, следующий из моего собственного сценария, который находится в dashboard.html.twig.

Мой вопрос: как я могу, например, загрузить свой небольшой код javascript (конечно, я могу сохранить его в отдельном файле, таком как mycode.js), но как загрузить только когда я использовал этот маршрут файла dashboard.html.twig? а после jquery грузится? из-за других роутеров я не t need this mycode.js so I don хочу поместить его в файл base.html.twig в блоке javascript, есть идеи?

Answer 1

Вы можете нырять

{% extends "admin.html.twig" %} {# use only in case your all templates are at the same places like app/Resources/views/admin.html.twig #}
{% block javascripts %}
    {{ parent() }} {# loads the parent javascript block, from the template you are extending in first line. #}
    <script src="/assets/js/dashboard/code.js"></script>
{% endblock %}

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

{% extends "YourBundleName:Default:admin.html.twig" %} {# YourControllerRelativeName just in case your view structure is like views/Default/admin.html.twig#}
    {% block javascripts %}
        {{ parent() }} {# loads the parent javascript block, from the template you are extending in first line. #}
        <script src="/assets/js/dashboard/code.js"></script>
    {% endblock %}

для лучшего понимания вы должны прочитать немного здесь: https://symfony.com/doc/2.8/templating.html Примечание: - в документах вы должны изменить версию в соответствии с текущей версией.

Answer 2

Я бы предложил следующее решение.

1. Объявите следующий блок в base.html.twig после {% block javascripts %}{% endblock %}

   {% block javascript_page %}{# specific code for current page #}{% endblock %}

2. Затем на вашей странице вы можете включить скрипты для конкретной страницы

   {% extends "admin.html.twig" %} или {% extends "base.html.twig" %}

   {% block javascript_page %} <script src="/assets/js/pages/my_page.js"></script> {% endblock %}

Хотя ответ DarkBee также верен, но в этом случае вам не нужно беспокоиться о том, чтобы звонить {{ parent() }} на каждой странице.

Answer 3

Если dashboard напрямую расширяет admin, то вы можете сделать следующее, чтобы загрузить все сценарии администратора и добавить специальный сценарий dashboard:

{% extends "admin.html.twig" %}
{% block javascripts %}
    {{ parent() }} {# execute the parent block, thus loading all scripts in admin #}
    <script src="/assets/js/dashboard/mycode.js"></script>
{% endblock %}