Question

我在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控制台并写下这个。$（'＃login-modal'）。modal（）;它就可以了。

我查看DOM，并按如下方式加载引导程序：

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

有人可以帮助我吗？

Answer 1

看起来你的MainView的$ el是空的，你还没有指定一个模板供它使用。所以，实质上，当您在loginModal中引用“this”时，它正在尝试找到与您的jquery选择器匹配的第一个DOM元素 - 但它正在里面查找视图$ 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结构知之甚少，不足以帮助你，但希望这至少可以帮助你开始。

Backbone：Bootstrap modal（）在带有require.js的加载页面上不起作用

1 个答案: