1

我在 Symfony2 项目中使用Twitter Bootstrap 选项卡，它们运行良好 - 但仅在开发环境中，在生产中它们似乎损坏（而不是切换选项卡，链接像普通链接一样工作，#de/#en 添加到网址）。

我在我的模板中使用以下标记：

    <ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
        <li class="active">
            <a data-toggle="tab" href="#de" data-translation-locale="de">Deutsch</a
        </li>
        <li>
            <a data-toggle="tab" href="#en" data-translation-locale="en">English</a
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="de">
             Deutsch
        </div>
        <div class="tab-pane" id="en">
             English
        </div>
    </div>

在使用Assetic加载 jquery 后，会包含 Bootstrap .js 文件：

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    {% javascripts output="js/frontend.js"
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-affix.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-alert.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-button.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-carousel.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-collapse.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-dropdown.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-modal.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-popover.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-scrollspy.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-tab.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-tooltip.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-transition.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-typeahead.js'
       %}
    <script src="{{ asset(asset_url) }}"></script>
    {% endjavascripts %}

我的资产配置（在 config.yml 中）如下所示：

assetic:
 debug: %kernel.debug%
 use_controller: false
 filters:
    cssrewrite: ~
    lessphp:
        file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
        apply_to: "\.less$"

对于开发环境（config_dev.yml），use_controller 选项设置为 true：

assetic:
    use_controller: true

我使用assetic:dump web（有和没有--env=prod --no-debug 选项），生成并加载了js/frontend.js，bootstrap-tab.js在其中（打开文件并检查），但是这些选项卡仅适用于开发人员。我什至在 config.yml 中设置了 use_controller=true 只是为了看看是否有任何变化。

可行的方法是将 bootstrap-tab.js 从其供应商目录复制到 /web/js 并手动包含它。

目前我正在使用网站上的 bootstrap.min.js 并且效果很好，但我真的很想知道我在使用 Assetic 时做错了什么。

4

1 回答 1

1

这就是诀窍：

    {% javascripts output="js/frontend.js"
       ...
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

我不确定我是从哪里得到的，但是asset(asset_url) 似乎是错误的——只使用asset_url 就可以了。所以我简单地改变了

    <script src="{{ asset(asset_url) }}"></script>

到

    <script src="{{ asset_url }}"></script>

我看不出最终的 html 有什么不同，但这确实起到了作用。我将不得不仔细查看 Assetic 文档以了解详细信息。

于 2012-11-13T10:51:52.037 回答