资产配置错误? Bootstrap选项卡在Symfony2 dev中工作,在生产中中断

时间:2012-11-12 16:01:29

标签: symfony twitter-bootstrap assetic

我在Symfony2项目中使用Twitter Bootstrap tabs并且它们工作得很好 - 但仅在开发环境中,在生产中它们似乎被破坏(而不是切换标签,链接像普通链接一样工作并且#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 %}

我的assetic配置(在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$"

对于dev环境(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我做错了什么。

1 个答案:

答案 0 :(得分:1)

这就是诀窍:

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

我不知道我从哪里得到这个,但资产(asset_url)似乎是错误的 - 只使用asset_url工作正常。所以我只是改变了

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

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

我认为最终的html没有任何区别,但是这样做了。我将不得不仔细查看Assetic文档的详细信息。