5

我是 Symfony2 框架的新手，并不完全了解如何使用 javascript 以及如何以最佳方式包含它们。

我需要的是：在每个页面中包含 jQuery 脚本。

我所拥有的：我有这样的常见布局：

<!DOCTYPE html>
<html>
    <head>
        {% block javascripts %}{% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}

    </body>
</html>

jquery.js 应该放在哪里。web/bundles/jquery呢？还是有一些特殊的官方 jquery 捆绑包？我应该使用asset() 以及如何使用？

4

4 回答 4

13

假设您的 jquery.min.js 位于 src/Acme/FooBundle/Resources/public/js/

你可以使用

<script type="text/javascript" src="{{ asset('bundles/acmefoo/js/jquery.min.js') }}"></script>

或者

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

进入你的树枝模板。

确保您之后安装了资产或运行此命令

php app/console assets:install web --symlink
于 2012-08-17T15:21:01.280 回答
8

有几种方法可以在 Symfony 项目中包含 jQuery。你可以：

1. 使用前端包管理器（Bower）安装 jQuery

Symfony 文档指出：

Bower是用于前端依赖项的依赖项管理工具，例如 Bootstrap 或jQuery。

如果尚未安装 Bower，您可以使用 npm 全局安装它（需要节点）：

npm install -g bower

根据Symfony 文档：

捆绑软件不应嵌入以 JavaScript、CSS 或任何其他语言编写的第三方库。

因此，我们将 jQuery 直接存储在web/可公开访问的目录中。要告诉 Bower 在哪里安装软件包，请在 Symfony 项目根目录中创建一个.bowerrc文件，其中包含以下内容：

{
    "directory": "web/assets/vendor/"
}

在您的项目根目录中执行bower init以创建bower.json，它将定义已安装的包。为每个问题键入 enter 以回答默认值（为模块类型选择“全局”）。

Bower 已准备好在您的项目中安装 jQuery：

bower install --save jquery

现在您可以在模板中包含 jQuery：

<script src="{{ asset('assets/vendor/jquery/dist/jquery.min.js') }}"></script>

目前 Bower 没有Composer 上的“锁定”功能。这就是为什么您可能应该提交 Bower 下载的资产，而不是将该目录添加到您的 .gitignore 文件中。这可能会在未来发生变化：bower/bower#1748。

2. 用 Composer 安装 jQuery

即使 Composer 是 PHP 的依赖管理器，您也可以使用它来安装 jQuery。

为了使 Composer 能够安装 components /jquery等组件，您首先需要添加component-installer：

composer require robloach/component-installer

然后修改您的composer.json文件以包括：

"require": {
    "components/jquery": "3.1.1"
},
"config": {
    "component-dir": "web/assets/vendor"
},

并执行composer install. web/assets/vendor这将在目录中安装 jQuery 。

然后，您可以在模板中包含 jQuery：

<script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>

3. 包含来自 CDN 的 jQuery

以谷歌 CDN 为例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

关于使用 CDN 的优缺点，我建议您阅读此页面。

在所有情况下：

为了确保您的脚本（需要 jQuery）能够正常工作，必须首先加载 jQuery。因此，根据您的页面加载要求，您应该：

  • 在您需要之前包含 jQuery，或者
  • 将其包含在<HEAD>, 或
  • 在你的脚本中使用defer
于 2016-12-25T22:24:28.007 回答
0

为了纯洁。当然<script>标签应该是关闭的，所以正确的代码片段是：

<script type="text/javascript" src="{{ asset('bundles/acmefoo/js/jquery.min.js') }}"></script>

和

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

否则页面的全部内容将被视为script标签的内容，并显示为空白。

于 2014-09-20T23:22:29.817 回答
0

要使用 composer 包实现，请导航到您的 symfony 包并运行以下命令。

下载供应商包：

你选择的包取决于你，我在这个例子中使用了一个流行的包（bmatzner/jquery-bundle）。

php composer.phar require bmatzner/jquery-bundle:2.*对于 jQuery 2.x

或者

php composer.phar require bmatzner/jquery-bundle:1.*对于 jQuery 1.x

将 Bundle 添加到您的 AppKernel：

/* /app/AppKernel.php */

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            new Bmatzner\JQueryBundle\BmatznerJQueryBundle(),
    ///...

安装资产：

php bin/console assets:install --symlink web

要包含在模板中：

<!-- /app/Resources/views/base.html.twig -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <script type="text/javascript" src="{{ asset('bundles/bmatznerjquery/js/jquery.min.js') }}"></script>
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

清除缓存：

php bin/console cache:clear --env=dev
php bin/console cache:clear --env=prod
于 2016-05-13T17:24:46.323 回答