骨干网：Bootstrap modal() 不适用于使用 require.js 的加载页面答案

【问题标题】：Backbone: Bootstrap modal() doesn´t work on load page with require.js骨干网：Bootstrap modal() 不适用于使用 require.js 的加载页面
【发布时间】：2013-07-11 15:26:26
【问题描述】：

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

这是我的观点：

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 控制台并编写 this.$('#login-modal').modal();，它就可以工作。

我查看了 DOM，bootstrap 加载如下：

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

有人可以帮助我吗？

【问题讨论】：

标签： twitter-bootstrap backbone.js require bootstrap-modal

【解决方案1】：

您的 MainView 的 $el 似乎是空的，并且您还没有指定要使用的模板。因此，本质上，当您在 loginModal 中引用“this”时，它会尝试找到与您的 jquery 选择器匹配的第一个 DOM 元素——但它正在 inside 视图 $el 中寻找它空的。当您从控制台尝试它时，“this”将成为全局文档范围，因此您可以找到它。

我的建议是将主视图的 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 结构了解不多，无法为您提供更多帮助，但希望至少能给您一个开始。

【讨论】：