Twitter bootstrap 主干：Bootstrap modal（）不´；t使用require.js在加载页面上工作

我已经在require.js上定义了我的文件配置，如下所示：

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();
})

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

这是我的观点：

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;

});

当我点击nav-link.login时，会触发函数“loginModal”，但它不会显示我的模态形式，其他指令也会起作用

但是如果我打开javascript控制台并编写此代码。$（“#登录模式”）.modal（）；，它起作用了

我查看DOM，引导加载如下：

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();
})

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

---

有人能帮我吗？

看起来您的MainView的$el是空的，您也没有为它指定要使用的模板。因此，本质上，当您在LoginModel中引用“this”时，它试图找到与jquery选择器匹配的第一个DOM元素——但它在视图$el中查找它，该视图为空。当您从控制台尝试它时，“this”成为全局文档范围，因此您可以找到它

我的建议是将mainview的html加载到下划线模板中，并从主干中在标准呈现函数中呈现它。它可能看起来像这样：

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;

});

我对您的UI结构了解不够，无法为您提供更多帮助，但希望这至少能给您一个开始