Uncaught TypeError: Object function (){return i.apply(this,arguments)} has no method '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

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

Answer 2

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