Backbone: Bootstrap modal() doesn´t work on load page with require.js

Question

I have define my file config on require.js as follows:

require.config({
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'bootstrap': {
            deps: ['jquery']
        }
    },
    paths: {
        jquery: 'libs/jquery-1.10.1',
        underscore: 'libs/underscore',
        backbone: 'libs/backbone',
        bootstrap: 'libs/bootstrap',
        templates: '../templates'
    }
});

require(['app'], function (App) {
    App.initialize();
})

And this is my View:

define([
    'jquery',
    'underscore',
    'backbone',
    'bootstrap'
], function ($, _, Backbone, Bootstrap) {

        var MainView = Backbone.View.extend({

            el: $('.container'),

            events: {
                'click .nav-link.login': 'loginModal'
            },

            loginModal: function() {
                this.$('#login-email, #login-password').val('');
                this.$('#login-modal .alert').addClass('hide');
                this.$('#login-modal').modal();
            }

        });

        return MainView;

});

When I click on the nav-link.login, the function 'loginModal' is triggered but it doesn´t shows my modal form, the other instructions work.

But if i open the javascript console and write this.$('#login-modal').modal();, it works.

I look in the DOM and the bootstrap is loaded as follows:

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="js/libs/bootstrap.js"></script>

Someone could help me?

Answer 1

It looks like your MainView's $el is empty and you haven't specified a template for it to use either. So, in essence, when you're referencing "this" in loginModal, it's attempting to find the first DOM element that matches your jquery selector -- but it's looking for it inside the view $el which is empty. When you attempt it from the console, "this" becomes the global document scope and so you find it.

My suggestion would be to load your mainview's html into a underscore template and render it inside the standard render function from backbone. It would probably look something like this:

define([
    'jquery',
    'underscore',
    'backbone',
    'bootstrap',
    '!text/path_to_html_templates/MainView.html'
], function ($, _, Backbone, Bootstrap, mainViewTemplate) {

    var MainView = Backbone.View.extend({

        $el: $('.container'),

        template: _.template(mainViewTemplate),

        events: {
            'click .nav-link.login': 'loginModal'
        },

        loginModal: function() {
            this.$('#login-email, #login-password').val('');
            this.$('#login-modal .alert').addClass('hide');
            this.$('#login-modal').modal();
        },

        render: function() {
            this.$el.html(this.template());
        }

    });

    return MainView;

});

I don't know enough of your UI structure to help you much more than that but hopefully that at least gives you a start.