bootstrap loading issue after optimization of require.js modules using r.js

Vote count:

0

I have a single page application developed with require.js AMD modules. I am using bootstrap for certain functionalities like modals, button loading etc. Apart from these I also use a navbar on top that has dropdowns.

Now I have two views: Header and MainContent. Header View contains navigation which in turn has dropdowns. I require to define bootstrap as a dependency to it to make dropdowns work. In the MainContent view I need to use modals, button loading etc and so here also i need to define bootstrap dependency.

Both of them doesn't work together. If I include the bootstrap in header, Dropdown works. And If I also define bootstrap as dependency in MainContent view, modals etc work but dropdowns stops working. So defining in both doesn't work and defining in either one of them doesn't work either. I am quiet confused on this.

This problem only starts after I build the project using r.js optimizer. Prior to optimization it works fine.

Here is my header view:

define([
    'text!../templates/header.html',
    'bootstrap',
    'text!../templates/select-account.html',
    'typeahead'
], function (template,bootstrap,tmpl) {
    var events = _.extend({},Backbone.Events);
    var view = Backbone.View.extend({

        events: {
            'click #facilityManagement': function(){
                if(!Medocity.util.getCookie('activeAccountId'))
                {
                   this.selectAccount({navigateTo:'facility-management'});
                }
                else
                {
                   Backbone.history.navigate('facility-management',true);
                }    
            },
            'click #changeAccount' : function(){
                this.selectAccount();
            },
            'click #userManagement': function(){
                Backbone.history.navigate('user-management',true);
            },
            'click #accountManagement': function(){
                Backbone.history.navigate('account-management',true);
            },
            'click #dashboard': function(){
                Backbone.history.navigate('dashboard',true);
            }

        },
        render: function () {
            this.$el.html(this.renderTemplate(template,{}));
            this.highlightNav();
            this.$('#Loader').slideDown('fast');
            return this;
        }
         });

Not the complete code but should suffice. Similar is the MainContent View.

asked 1 min ago

beNerd

849

bootstrap loading issue after optimization of require.js modules using r.js