如何在子模板中的 JavaScript 标记之前从布局模板加载带有 Assetic 的 jQuery？答案

【问题标题】：How to load jQuery with Assetic from layout template before JavaScript tags in child template?如何在子模板中的 JavaScript 标记之前从布局模板加载带有 Assetic 的 jQuery？
【发布时间】：2012-12-21 15:18:04
【问题描述】：

正如我们在Symfony2 documentation 中看到的，JavaScript 文件必须在 body 标记的底部声明。

但是，如果我在布局模板中声明 jQuery 库，并且如果我想在子模板中使用 jQuery，则会出现此错误：

$ 未定义

似乎 jQuery 是在我的脚本标记之后加载的。当我在 jQuery 文件的顶部放置一条警报消息时，会显示警报。

在加载 jQuery 之前有什么想法吗？

在我的基础、布局和子模板下方查找。

app/Resources/views/layout.html.twig：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        {% block stylesheets %}
                {# ... #}
        {% endblock %}
    </head>

    <body>            
        <div id="container">
            {# ... #}
        </div>

        {% block javascripts %}
        {% endblock %}
    </body>
</html>

src/MyBundle/resources/views/layout.html.twig：

{% extends "::layout.html.twig" %}

{% block main %}
    {% block mybundle_body %}
    {% endblock %}
{% endblock %}

{% block javascripts %} 
    {% javascripts
        '@MyBlogBundle/Resources/public/js/jquery-1.8.3.min.js' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock javascripts %}

src/MyBundle/resources/views/MyBundle/modify.html.twig：

{% extends "MyBundle::layout.html.twig" %}

{% block mybundle_body %}

    <script type="text/javascript">
    // Enable the file uploader
    $(function() { // my error here : $ is not defined
        new PunkAveFileUploader({ 
            {# ... #}
        });
    });
    </script>
{% endblock %}

非常感谢。

【问题讨论】：

标签： jquery symfony twig assetic

【解决方案1】：

你可以建立一个新的继承。所以你的脚本将永远在你的 jQuery 之后。

{% block javascripts %} 
    {% javascripts
        '@MyBlogBundle/Resources/public/js/jquery-1.8.3.min.js' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    {% block script %}
    {% endblock script %}
{% endblock javascripts %}

src/MyBundle/resources/views/MyBundle/modify.html.twig：

{% extends "MyBundle::layout.html.twig" %}

{% block mybundle_body %}
   //some stuff
{% endblock %}

{% block script %}

<script type="text/javascript">
    // Enable the file uploader
    $(function() { // my error here : $ is not defined
        new PunkAveFileUploader({ 
            {# ... #}
        });
    });
    </script>
{% endblock %}

【讨论】：

【解决方案2】：

好吧，就像你说的，jQuery 是在你的<script> 标记之后加载的，所以当你的脚本尝试使用 jQuery（带有$ 符号）时，jQuery 尚未定义。

我会将{% block javascripts %} 移动到头部标签。

【讨论】：

谢谢。但是，我想知道为什么 {% block javascripts %} 位于 Symfony2 documentation 的正文标签底部。
如果该脚本只在页面完全加载时才需要，您可以将它放在body标签的底部，这样页面会先加载视觉（html）内容并显示给用户快一点。但是如果你在页面完全加载之前需要它，你需要把它放在代码的前面。