1

正如我们在Symfony2 文档中所读到的，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/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 %}

非常感谢。

4

2 回答 2

4

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

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

于 2013-01-08T07:55:20.023 回答
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/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 %}
于 2013-01-08T09:04:43.327 回答