jQuery不与卓别林合作

时间:2013-07-01 09:19:33

标签: twitter-bootstrap backbone.js requirejs chaplinjs

我正在使用一些Backbone Framework - Chaplin,我正在使用以下文件列表:

以下是main.js中的一些代码块:

paths: {
        jquery: 'vendors/jquery/jquery',
        underscore: 'vendors/underscore/underscore',
        backbone: 'vendors/backbone/backbone',
        chaplin: 'vendors/chaplin-0.9.0',        
        bootstrap: 'vendors/bootstrap/js/bootstrap.min',        
        jqTriggers: 'lib/jquery-triggers'
    },

shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['jquery','underscore'],
            exports: 'Backbone'
        },
        bootstrap: {
            deps: ['jquery']
        },        
        jqTriggers: {
            deps: ['jquery']
        }
    } 

以下是jquery-triggers.js

中的内容
define(['jquery'], function($) {

   $('.dropdown-toggle').dropdown(); 

});

以下是使用Bootstrap框架的模板文件的代码块:

<div class="navbar navbar-inverse nav">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/">Project Name</a>

                <div class="nav-collapse collapse">
                  <ul class="nav">
                      <li class="divider-vertical"></li>
                      <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li>                      
                  </ul>
                  <div class="pull-right">
                    <ul class="nav pull-right">
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome, User <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="/user/preferences"><i class="icon-cog"></i> Preferences</a></li>
                                <li><a href="/help/support"><i class="icon-envelope"></i> Contact Support</a></li>
                                <li class="divider"></li>
                                <li><a href="/auth/logout"><i class="icon-off"></i> Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                  </div>
                </div>
            </div>
        </div>
    </div>

问题:下拉列表中的“下拉菜单”无效。

我猜! jquery-triggers.js没有加载。因为我无法看到它分别在Chrome / firefox firebug network / net上加载。

我尝试在require.js包含之后在我的index.html页面中包含jquery-triggers.js文件但是它没有用,因为jquery-triggers.js文件很早就被加载了。

1 个答案:

答案 0 :(得分:0)

将jqTriggers传递给整个应用程序所需的数组。

随后将随处加载。

require(['application', 'routes', 'jqTriggers'], 
  function (Application, routes) {
     var app = new Application({
     routes: routes,
     controllerSuffix: '-controller'
   });          
});