Separating JavaScripts file in symfony4 twig templates

Question

I have a question about, how to separate a loading specify javascript file of specify template twig file.

I got for example admin.html.twig which extends base.html.twig, in base i got

   {% 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 %}

and I got next file like dashboard.html.twig which extends a admin.html.twig file, and my question is that in dashboard.html.twig file i got at the a little writed-self small javascript code, and this javascript of course use a jquery library but this library i loaded in base.html.twig file a next of my selfwrited script which is in dashboard.html.twig.

My question is, how i can for example load my small code of javascript (of course i can save it in separated file like mycode.js) but how to load only when this route of dashboard.html.twig file i used and after jquery is loaded ? becouse in another routers i dont need this mycode.js so I dont wanna put it to base.html.twig file in javascript block, any idea ?

Answer 1

If dashboard directly extends admin then u can do the following to ensure to load all the admin scripts and to add the dashboard specific script:

{% 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 %}

Answer 2

You can dived

{% 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 %}

in case you are trying to extend a template from another bundle then you can use this

{% 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 %}

to the better understanding you should read a little here: https://symfony.com/doc/2.8/templating.html Note:- in the documents you should change version as per your current version.

Answer 3

I would suggest the following solution.

1. Declare the following block in base.html.twig after {% block javascripts %}{% endblock %}

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

2. Then in your page you can include page specific scripts

   {% extends "admin.html.twig" %} or {% extends "base.html.twig" %}

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

Although answer by DarkBee is also correct but in this way you don't have to worry about calling {{ parent() }} in each page.