在symfony4树枝模板中分离JavaScript文件

时间:2018-09-06 12:25:20

标签: javascript symfony twig

我有一个问题,如何分隔指定模板树枝文件的加载指定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将其放置到javascript块中的base.html.twig文件中,知道吗?

3 个答案:

答案 0 :(得分:1)

如果Timestamp直接扩展{ "_id": { "_data": "825B9102E30000000129295A1004BFB7B7E0A5F648929251FC06F06640A2463C5F6964003C62366332623361352D313965352D343162392D386336322D396565313130393337666634000004" }, "operationType": "insert", "clusterTime": Timestamp(1536230115, 1), // ... omitted } ,则您可以执行以下操作以确保加载所有管理脚本并添加特定于dashboard的脚本:

admin

答案 1 :(得分:0)

您可以潜水

var serializeURLParameters = function(oParameters) {
    return "?" + Object.keys(oParameters).map(function(key) {
        if(oParameters[key]) {
            return key + "=" + encodeURIComponent(oParameters[key]);
        }
    }).filter(function(elem) {
        return !! elem;
    }).join("&");
}

如果您尝试从另一个包中扩展模板,则可以使用此

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

为了更好地理解,您应该在这里阅读一些内容: https://symfony.com/doc/2.8/templating.html 注意:-在文档中,您应该根据当前版本更改版本。

答案 2 :(得分:0)

我建议以下解决方案。

  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() }}