Question

我目前正在使用一个使用一些JS文件的bootstrap模板。为了让它们加载，我将所有必需的JS文件放在app / Resources / views / base.html.twig文件中。以下是代码片段：

{% block body %}{% endblock %}
{% block javascripts %}
    {% javascripts '@ABBundle/Resources/public/js/*' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

位于AB / ABBundle / Resources / views / Home / show.html.twig的子twig文件中的代码具有以下代码：

{% extends '::base.html.twig' %}
{% block body %}
    blah blah blah normal html code blah blah blah
{% endblock %}

问题在于，当我查看此页面时，我收到了一些错误，例如“ReferenceError：jQuery未定义”和“ReferenceError：$未定义”。这是即使包含JS文件（JS文件的名称按预期更改）。

我发现错误可以通过一个相当讨厌的黑客来解决，而不是用一行代码加载所有js文件{％javascripts'@ABBundle / Resources / public / js / *'％}我知道需要包括像这样的js文件：

{% block javascripts %}
    {% javascripts '@ABBundle/Resources/public/js/jquery.js' %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {% javascripts '@ABBundle/Resources/public/js/jquery.prettyPhoto.js' %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

有没有办法可以强制Assetic首先加载某些JS文件，同时仍然使用更短的文件：{％javascripts'@ABBundle / Resources / public / js / *'％}选项？

Answer 1

您可以使用不同的文件夹结构指定加载文件的顺序，如下所示：

{% javascripts '@AcmeFooBundle/Resources/public/js/file1.js' 
               '@AcmeFooBundle/Resources/public/js/file2.js'
               '@AcmeFooBundle/Resources/public/js/folder/*'
%}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

Answer 2

我是按照我想要的顺序命名我的.js文件。像这样：

10_foo.js
20_bar.js
30_baz.js

然后我不需要逐个指定它们，我只是照常做：

{% javascripts '@MyBundle/Resources/public/js/*' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

并按顺序加载。

现在对于每个页面中应该可用的主库，我在app / Resources / view中使用base.html.twig模板，该模板在每个页面中都有扩展，其中包含以下代码：

在<body>代码之前：

{% stylesheets '@MyMainBundle/Resources/public/css/*' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% block stylesheets %}{% endblock %}

并且在<body>标记的末尾附近：

{% javascripts  '@MyMainBundle/Resources/public/js/*' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% block javascripts %}{% endblock %}

所以我将主要的js库（带有我上面提到的命名约定）留在＆＃34; MainBundle＆＃34;并且还在基本模板中配置。这样它们就被加载到每个页面中，我可以使用特定于该页面的一些文件扩展CSS和javascript文件，如下所示：

{% extends '::base.html.twig' %}
{% block stylesheets %}
    {% stylesheets '@MySpecificBundle/Resources/public/css/*'  %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block body %}
     ... < whatever > ...
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    {% javascripts  '@MySpecificBundle/Resources/public/js/*' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

Answer 3

这是一个老问题，但我也想知道如何实现这一目标，并基于@ TroodoN-Mike解决方案，我意识到这将解决问题：

{% javascripts '@AcmeFooBundle/Resources/public/js/file1.js' '@AcmeFooBundle/Resources/public/js/*' %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %}

在JS文件的Symfony2资产中加载订单

3 个答案: