Backbone - Uncaught TypeError: Object [object Object] has no method 'call'

Question

I am trying to save a model, I can save the first model fine, however if I save one model and then another straight afterwards - I get the following error,

Uncaught TypeError: Object [object Object] has no method 'call'

What would be causing this error?

My save code looks like this,

GroupModalHeaderView.prototype.save = function(e) {

  var $this = this;
  this.collection = new app.GroupCollection();

  if(this.$("#group-name").val() !== "") {
    this.collection.add(this.model,{
      merge: true
    });
  }

  this.model.save({
    name: this.$("#group-name").val(),
    async: false,
    wait: true
  }, {
    success: function() {

      var GroupList = new app.GroupListView({
        model: $this.model,
        collection: $this.collection
      });

      var modal = new app.GroupModalView({
        model: $this.model,
        collection: $this.collection
      });

      $this.collection.on("change",  GroupList.render(), this);
      $this.collection.on("change",  modal.render(), this);
      //return $this.cancel();
    }
  });
};

And my Model code looks like this,

    (function() {
  var Group, GroupSearchModel,
    __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

  Group = (function(_super) {

    __extends(Group, _super);

    function Group() {
      return Group.__super__.constructor.apply(this, arguments);
    }

    Group.prototype.urlRoot = config.base + "api/group/groups";

    Group.prototype.defaults = {
      user_id: "",
      name: "New Group",
      email: "",
      url: "",
      telephone: "",
      mobile: "",
      fax: "",
      people: ""
    };

    Group.prototype.idAttribute = "id";

    return Group;

  })(app.BaseModel);

  GroupSearchModel = (function(_super) {

    __extends(GroupSearchModel, _super);

    function GroupSearchModel() {
      return GroupSearchModel.__super__.constructor.apply(this, arguments);
    }

    return GroupSearchModel;

  })(app.BaseModel);

  this.app = window.app || {};

  this.app.Group = Group;

  this.app.GroupSearchModel = GroupSearchModel;

}).call(this);

I am assuming that is has something to do with the .call(this) at the end of my model?

Based on your code, you REALLY need to read this article about how to structure Backbone views and models: http://alexkinnee.com/2013/12/optimal-use-of-backbone-js-model-events-and-mvc-structure/ :) — Alex K, Jan 16 '14 at 18:38

score 1 · Answer 1 · answered Jul 19 '13 at 15:44

There's a bunch of whackiness in your code, but my first guess is that this mistake is causing your current problem. When binding event handlers, you usually want to reference but not EXCUTE the handler function. So instead of GroupList.render() (with the parenthesese) which is executing a function, you want GroupList.render (without the parenthesese) which is just referencing it without execution.

$this.collection.on("change",  GroupList.render, this);
$this.collection.on("change",  modal.render, this);
//return $this.cancel();

Backbone - Uncaught TypeError: Object [object Object] has no method 'call'

1 Answers1