javascript - 未捕获的类型错误 : View is not a constructor

Question

我有未捕获的类型错误:UserRegisterView 不是构造函数。我不明白这个错误。我查看了所有代码，但没有找到它。抱歉我的英语不好。请帮助我

感谢您的回答

已更新

UserRegisterView在这里

var UserRegisterView = Backbone.View.extend({

    model: User,
    el: '#form',
    events: {
        'click input[id="infoWeek"]': 'infoWeek',
        'click input[id="infoMonth"]': 'infoMonth'
    },

    infoWeek: function() {

        this.$el.find("#dayOfMonth").hide();
        this.render();
    },

    infoMonth: function() {

        this.$el.find("#dayOfWeek").hide();
        this.render();

    }
});

var AddUserView = Backbone.View.extend({
    el: $(".page"),
    events: {
        'click #saveUser': 'saveUser'
    },
    saveUser: function() {
        var user = new User();
        user.set({
            username: $("#username").val(),
            lastName: $("#lastName").val(),
            regNumber: $("#regNumber").val(),
            password: $("#password").val(),
            departmentName: $("#departmentName").val(),
            email: $("#email").val(),
            role: $("#role").val()
        });
        user.save();

        if (document.getElementById('isOpen').checked) {
            user.set("isOpen", $("#isOpen").val("1"));
            user.save();
        } else {
            user.set("isOpen", $("#isOpen").val("0"));
            user.save();
        }

        if (document.getElementById('dayOfWeek').checked) {
            user.set("dayOfWeek", $("#dayOfWeek").val());
            user.save();
        } else if (document.getElementById('dayOfMonth').checked) {
            user.set("dayOfMonth", $("#dayOfMonth").val());
            user.save();
        }


        $("#username").val("");
        $("#firstName").val("");
        $("#lastName").val("");
        $("#regNumber").val("");
        $("#password").val("");
        $("#deparmentName").val("");
        $("#email").val("");
        $("#isOpen").val("");
        $("#dayOfWeek").val("");
        $("#dayOfMonth").val("");
    },

    render: function() {
        var that = this;
        var template = Handlebars.compile(UserRegister);
        var myHtml = template(that.model.toJSON());
        that.$el.html(myHtml);
        return this;
    }
});

return {
    AddUserView: AddUserView,
    UserRegisterView: UserRegisterView
};

});

路由器用户功能。

define([
    'jquery',
    'underscore',
    'backbone',
    'handlebars',
    'spin',
    'app/models/LoginModel',
    'app/views/LoginView',
    'app/views/UserRegisterView'
], function($,
    _,
    Backbone,
    Handlebars,
    Spinner,
    Login,
    LoginView,
    UserRegisterView
) {

    var Router = Backbone.Router.extend({
        routes: {
            'search': 'search',
            'login': 'login',
            'travels': 'travels',
            'user': 'user',
            'menu': 'menu',
            '': 'home'

        },
        user: function() {

            disposeView(new UserRegisterView().render());

        }

util.js 上的 dispose.view

function disposeView(view) {
    Backbone.View.prototype.close = function() {
        this.unbind();
        this.undelegateEvents();
    };

    /* Şu anki viewi yok et */
    if (this.currentView !== undefined) {
        this.currentView.close();
    }

    /* Yeni view oluştur. */
    this.currentView = view;
    this.currentView.delegateEvents();

    return this.currentView;
}

Answer 1

发生了什么

您的UserRegisterView模块返回一个包含两个构造函数的对象。

return {
    AddUserView: AddUserView,
    UserRegisterView: UserRegisterView
};

当使用这个模块时，你得到的是上面的对象。

define([
    // ...
    'app/views/UserRegisterView'
], function(
    // ...
    UserRegisterView // value of the return in the module
) {

因此，您将其称为 UserRegisterView 有点误导自己，因为它不是构造函数，而是包含构造函数的对象。

要使用模块当前的设置方式获取新的 UserRegisterView View 实例，您需要像这样调用它:

var userView = new UserRegisterView.UserRegisterView();

或者创建一个 AddUserView 实例:

var addView = new UserRegisterView.AddUserView();

解决方案

• 拆分模块，每个 View 构造函数一个模块。
• 更改名称，这样至少不会产生误导(例如 UserViewsModule)

<小时/>

其他改进

话虽如此，您的 Backbone 代码还可以进行其他改进。

var UserRegisterView = Backbone.View.extend({
    // that's useless (if not used) and not a view property.
    // model: User,

    // don't use `el` like that, especially when using the view as a shared Constructor
    el: '#form',
    events: {
        'click input[id="infoWeek"]': 'onInfoWeekClick',
        'click input[id="infoMonth"]': 'onInfoMonthClick'
    },

    initialize: function() {
        // Cache jQuery object of the view's element
        this.$dayOfMonth = this.$("#dayOfMonth");
        this.$dayOfMonth = this.$("#dayOfMonth");
        // also use the shortcut function instead of `this.$el.find()`
    }

    onInfoWeekClick: function(e) {
        this.$dayOfMonth.hide();
        // calling render here is useless unless your using it as a parent
        // view, where the child view overrides the render function.
    },

    onInfoMonthClick: function(e) {
        this.$dayOfMonth.hide();
    }
});

disposeView 函数可以简化:

function disposeView(view) {
    var current = this.currentView;
    if (current) current.close();
    current = this.currentView = view;
    current.delegateEvents();
    return current;
}

不要在每次调用该函数时更改默认的 Backbone View 原型(prototype)。相反，只需添加该函数一次。

_.extend(Backbone.View.prototype, {
    close: function() {
        this.unbind();
        this.undelegateEvents();
    },
    // any other function you want to add can go here.
});

在另一个答案中，我详细介绍了 how to extend Backbone's core classes with requirejs transparently .

您已经在使用 jQuery，所以不要使用 JavaScript DOM API document.getElementById('isOpen') 和 jQuery 选择器 $('#isOpen') >.

我对以下 View 做了一些改进。花时间为自己创建一些实用函数(例如 reset 和 getValues)，以简化代码流程并封装复杂性。

var AddUserView = Backbone.View.extend({
    el: $(".page"),
    events: {
        'click #saveUser': 'saveUser'
    },
    // compile the template once while creating the view class
    template: Handlebars.compile(UserRegister),

    // get the selector string out of the code and place them in one place
    // easy to change and maintain.
    fields: {
        username: "#username",
        firstName: "#firstName",
        lastName: "#lastName",
        regNumber: "#regNumber",
        password: "#password",
        deparmentName: "#deparmentName",
        email: "#email",
        isOpen: "#isOpen",
        dayOfWeek: "#dayOfWeek",
        dayOfMonth: "#dayOfMonth",
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        // cache jQuery object of every field once after a render
        this.field = _.reduce(this.fields, function(fields, selector, key) {
            fields['$' + key] = this.$(selector);
            return fields;
        }, {}, this);
        return this;
    },
    reset: function() {
        // reset all the fields once without repeating code.
        _.each(this.field, function($field) {
            $field.val("");
        });
        return this;
    },
    getValues: function(keys) {
        // get the value of multiple fields returned in a nice object
        // ready to be sent to a Backbone model.
        return _.reduce(keys, function(data, key) {
            data[key] = this.field[key].val();
            return data;
        }, {}, this);
    },

    saveUser: function() {
        var field = this.field,
            user = new User(this.getValues([
                'username',
                'lastName',
                'regNumber',
                'password',
                'departmentName',
                'email',
                'role',
            ]));

        user.set({ isOpen: field.$isOpen.is(':checked') });

        if (field.$dayOfWeek.is(':checked')) {
            user.set("dayOfWeek", field.$dayOfWeek.val());
        } else if (field.$dayOfMonth.is(':checked')) {
            user.set("dayOfMonth", field.$dayOfMonth.val());
        }

        user.save();
        this.reset();
    },
});

在下面的代码片段中，您将上下文 (this) 放入局部变量中。我经常看到这样的情况，我可以说 90% 的时候我在 Stack Overflow 问题上看到它，但它毫无意义。它显然是复制粘贴的。

render: function() {
    var that = this;
    // ...
    that.$el.html(myHtml);
    return this;
}

请告诉我，您看到您将 this 放入 that，然后在整个函数中使用 that，然后您仍然返回 这个？!

当动态创建的回调中需要对象时，将上下文放入局部变量中非常有用。

render: function() {
    var that = this; // this is available here
    setTimeout(function() {
        // here this is not available.
        that.handleCallback();
    }, 10);
    // here we are in the same context as the first line.
    return this;
}