twitter bootstrap - jQuery is not working with Chaplin -
i working in backbone framework - chaplin using following list of files:
following of code block in 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'] } }
following contents in jquery-triggers.js
define(['jquery'], function($) { $('.dropdown-toggle').dropdown(); });
following code block of template file using bootstrap framework:
<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>
problem: drop-down 'dropdown' menu not working.
i guess! jquery-triggers.js not loading. because not able see gets loaded on chrome / firefox firebug network / net respectively.
i tried including jquery-triggers.js file in index.html page after require.js inclusion did not worked jquery-triggers.js files gets loaded early.
pass jqtriggers required array whole application.
it loaded everywhere.
require(['application', 'routes', 'jqtriggers'], function (application, routes) { var app = new application({ routes: routes, controllersuffix: '-controller' }); });
Comments
Post a Comment