Question

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

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

$未定义

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

之前加载jQuery的想法是什么？

在我的基础，布局和子模板下面找到。

应用程序/资源/视图/ 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 /资源/视图/ 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 /资源/视图/ 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 %}

非常感谢。

Answer 1

好吧，就像你说的那样，jQuery在你的<script>标签后加载，所以当你的脚本试图使用jQuery（带有$标志）时，jQuery不是尚未定义。

我会将{% block javascripts %}移到头标记。

Answer 2

您可以构建新的继承。所以你的脚本将永远在你的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 /资源/视图/ 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 %}

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

2 个答案: