未捕获的TypeError：对象函数（）{返回i.apply（this，arguments）}没有方法'on'

Question

For some reasons, I keep on getting this error, (See attached screenshot). I've tried adding a _.bindAll(this); and even tried upgrading my code to have the latest version of backbonejs. Still no luck.

Can someone help me on this?

var app = app || {};

(function ($) {
'use strict';

app.EmployeeView = Backbone.View.extend({
    el: '#container',
    model: app.Employee,
    events: {
        'click #save' : 'saveEntry'
    },
    initialize: function(){
        console.log('Inside Initialization!');
        this.$empName = this.$('#txtEmpName');
        this.$department = this.$('#txtDepartment');
        this.$designation = this.$('#txtDesignation');
        this.listenTo(app.employees, 'add', this.addEmployee);
        app.employees.fetch();
        console.log('End of Initialization!');
        //this.render();
    },
    render: function () {
        console.log('Inside Render!!');
        console.log(this.model);
        this.$el.html(this.template(this.model.toJSON()));
        console.log('Inside End of Render!!');
        return this;
    },
    newAttributes: function(){
        return{
            empName: this.$empName.val(),
            department: this.$department.val(),
            designation: this.$designation.val()
        };
    },

    saveEntry: function(){
        console.log('Inside SaveEntry!');
        //console.log(this.newAttributes());
        console.log('this.model');
        console.log(app.Employee);
        //app.employees.create(this.newAttributes());
        app.Employee.set(this.newAttributes());
        app.employees.add(app.Employee);
        console.log('After SaveEntry!');
    },
    addEmployee: function (todo) {
        var view = new app.EmployeeItemView({ model: app.Employee });
        $('#empInfo').append(view.render().el);
    }
})
})(jQuery);

Code for "collections/employees.js"

var app = app || {};
(function (){
    console.log('Inside collection');
    var Employees = Backbone.Collection.extend({
        model: app.Employee,
        localStorage: new Backbone.LocalStorage('employee-db')
    });
    app.employees = new Employees();
})();

Code for "model/employee.js"

var app = app || {};
(function(){
    'use strict';

    app.Employee = Backbone.Model.extend({
        defaults: {
            empName: '',
            department: '',
            designation: '' 
        }
    });
})();

Answer 1

You're saying this in your view:

model: app.Employee

app.Employee looks like a model "class" rather than a model instance. Your view wants a model instance in its model property. Normally you'd say something like this:

var employee = new app.Employee(...);
var view = new app.EmployeeView({ model: employee });

Answer 2

this.model.toJSON() won't work since this.model is the app.Employee constructor. Actually I don't see any meaning in your EmployeeView.render method. If it is aggregate view why you have model on it? Otherwise what is the second view class EmployeeItemView ? If you're following ToDo MVC example you can see that there is no model in AppView , that is why I conclude you need not model in your EmployeeView . And render method you provided seems to belong to EmployeeItemView .

Secondly, you call app.Employee.set which is also a call on a constructor not on an object. I think you meant

saveEntry: function(){
    console.log('Inside SaveEntry!');
    app.employees.create(this.newAttributes());
    console.log('After SaveEntry!');
},

If you want to pass a model to app.EmployeeItemView you should use callback argument.

addEmployee: function (employee) {
    var view = new app.EmployeeItemView({ model: employee });
    $('#empInfo').append(view.render().el);
}