Backbone says undefined method method_name even if its defined

Question

I have an employee_collection, employee_model, employee_collection_view and employee_view as given below.

Javascript for employee_collection

var EmployeeCollection = Backbone.Collection.extend({
  url: "/employees"
})

For employee_model

var Employee = Backbone.Model.extend({

  toogleStatus: function(){
    if(this.get('fired') === true){
      this.set({fired: false});
    }else{
      this.set({fired: true});
    }
    this.save();
  }
});

For employee_collection_view

var EmployeeListView = Backbone.View.extend({
  tagName: 'table',
  className: "table table-striped",
  initialize: function(options){
    this.display_type = options.display_type
  },

  render: function(){
    this.collection.models.forEach(this.addOne, this);
  },
  addOne: function(employee){
    console.log(this.display_type);
      var employeeView = new EmployeeView({model: employee});
      employeeView.render();
      this.$el.append(employeeView.el);
  }
});

For employee_view

var EmployeeView = Backbone.View.extend({
  tagName: "tr",
  template: _.template("<td><%= first_name %></td><td><%= last_name %> </td><td> <%= address %></td><td> <%= phone %></td><td><%= fired %></td><td><input type='button' value=<% (fired === true) ? print('hire') : print('fire') %> /></td>"),
  initialize: function(){
    this.model.on('change', this.render, this);
  },
  events: {
    'click input[type="button"]': 'toogleStatus'
  },

  toogleStatus: function(){
    console.log(this.model);
    this.model.toogleStatus();
  },
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    console.log(this.$el.html());
  },
  setupView: function(){
    console.log($("#employees_list").html());
  }
});

After the page loads, I am able to see the employee list in homepage, and there is a button at last column which has hire if fired attribute is true and fire if fired status is false.

But whats bugging me is when I press the button(fire/hire), the toogleStatus from employee_view gets triggered but error pops out at

this.model.toogleStatus();

saying

TypeError: this.model.toogleStatus is not a function
this.model.toogleStatus();

I logged this.model, and its getting printed.

Even though I have defined toogleStatus() method in employee_model, it says its not a function. Am I doing something worng?

application.js has the following code.

$(function(){
  var router = new Router();

  router.on('route:home', function(){
    var employeeCollection = new EmployeeCollection();
    employeeCollection.fetch({
      success: function(employees){
        var employeeListView = new EmployeeListView({collection: employees, display_type: "grid"});
        employeeListView.render("table");
        $('.page').html(employeeListView.el);
      }
    });

  });
  Backbone.history.start();
});

Thanks

Answer 1

You need to tell the EmployeeCollection which model subclass to use like this:

var EmployeeCollection = Backbone.Collection.extend({
  url: "/employees",
  model: Employee
})

By default, a collection will instantiate the basic Backbone.Model parent class and thus won't have any of your Employee subclass's custom methods.