4

我真的很想在我的 symfony 2 项目中使用资产，因为它有很多有用的功能，但我不确定实现以下要求的最佳方法。

我有几个可以包含在所有页面中的 js 文件。但是，其中一些仅与页面模板的子集相关，我在其中包含需要这些特定 javascript 文件的特定模板（或也嵌入特定控制器）。

现在我有以下选择：

  1. 我为布局和特定页面模板中的 javascripts 创建了一个块元素（我在其中包含带有 javascript 的模板，例如 templateWithComplexJs.html.twig），我使用 {{ parent() }} 覆盖此块，如此处所述:跨继承模板组合资产资源。

    {# ... specific.html.twig #}  
{% extends 'MyBundle::layout.html.twig' %}

...  
{% include 'MyBundle:Foo:templateWithComplexJs.html.twig' %}  
...  

{% block javascripts %}
    {{ parent() }}
    {% javascripts  
        '@MyBundle/Resources/public/js/specific/complex.js'  
    %}  
    <script src="{{ asset_url }}"></script>  
    {% endjavascripts %}  
{% endblock %}

    我看到的缺点：
    a) 当我调整包含的模板（例如更新到新的 js lib）时，我必须调整包含它们的所有页面模板。在一个很容易导致错误的复杂系统中。
    b）可能发生我两次包含一个javascript，一次在布局中，一次在模板的javascript中，assetic不知道，因为它们是分开处理的。

  2. 我在布局中包含了所有需要的 js 文件，然后我只需要在调整包含的模板时更改一个位置，而且我不太可能包含两次 javascripts。

    我看到的缺点：
    由于 js 文件的大小可能很大，我宁愿只在我真正需要它们的少数情况下才包含它们。

在这个相关的问题（Twig Assetic Stylesheets Between Multiple Templates）中，它说目前不可能使用资产来实现令人满意的解决方案，但我想我并不是唯一一个有这些要求并且想要使用资产的人。

那么，这种情况的最佳实践是什么？

4

1 回答 1

7

您可能会更简单地获得您的目标。在配置文件中设置您的资产组并为其命名，而不是在所有模板中这样做。这是一个简单的例子。

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller:
        enabled:    false #%kernel.debug%
        profiler:   false
    java: /usr/bin/java
    node: /usr/bin/node
    assets:
        backend_css:
            inputs:
                - %kernel.root_dir%/../path/to/some/css/file.css
                - %kernel.root_dir%/../path/to/some/less/file.less
            filters:
                - less
            output: css/backend.css
        frontend_css:
            inputs:
                - %kernel.root_dir%/../path/to/some/css/file.css
                - %kernel.root_dir%/../path/to/some/less/file.less
            filters:
                - less
            output: css/frontend.css
        backend_js:
            inputs:
                - %kernel.root_dir%/../path/to/some/js/file.js
                - %kernel.root_dir%/../path/to/some/js/other.js
            filters:
                - yui_js
            output: js/backend.js
        frontend_js:
            inputs:
                - %kernel.root_dir%/../path/to/some/js/file.js
                - %kernel.root_dir%/../path/to/some/js/other.js
            filters:
                - yui_js
            output: js/frontend.js
        special_backend_js:
            inputs:
                - %kernel.root_dir%/../path/to/some/js/file.js
                - %kernel.root_dir%/../path/to/some/js/other.js
            filters:
                - yui_js
            output: js/special_backend.js
    filters:
        cssrewrite: ~
        cssembed: 
            jar: %kernel.root_dir%/Resources/java/cssembed-0.4.5.jar
        # closure:
        #     jar: %kernel.root_dir%/Resources/java/compiler.jar
        yui_css:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        yui_js:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        less:
            node_paths: [%kernel.root_dir%/Resources/node_modules]
            apply_to: "\.less$"

现在在您的树枝模板中，您可以简单地执行以下操作：

{% block javascript %}
<script src="{{ asset('js/backend.js') }}"></script>
{% endblock javascript %}

并对你的 CSS 资产做同样的事情。这样，如果您想将另一个库添加到您的 backend.js 集合或包含一些 js 功能组（如 special_backend），它是您模板中的一个衬里，当您进行更改时，您只需要处理您的配置定义。

我希望这对你有所帮助。我敢肯定还有其他方法可以完成这项工作，但这是我的首选方法。

于 2014-01-02T22:36:16.903 回答