Question

I just want to fire an event when an input changes value using jQuery 1.7.2 and Backbone.js.

Currently I have the following (which works)

MyView: Backbone.View.extend({
  initialize: function() {

    this.colorInput = $("<input />", {
         "id": "color",
         "name": "color",
         "value": this.model.get("color")
    });

    var self = this;
    this.colorInput.on("change", function() {
      self.changeColor();
    });

  },
  changeColor: function() {
    var color = this.colorInput.val();
    this.model.set("color", color);
  }
});

I was trying to do it the other way where I just pass in my function.

this.colorInput.on("change", this.changeColor, this);

But when trying to do it that way, it throws the error

((jQuery.event.special[handleObj.origType] || {}).handle ||
handleObj.handler).apply is not a function
.apply( matched.elem, args );

(line 3332)

Which I’m not able to figure out. Any ideas why this way doesn’t work?

Answer 1

You’re confusing jQuery’s on:

.on( events [, selector] [, data], handler(eventObject) )
.on( events-map [, selector] [, data] )

with Backbone’s on:

object.on(event, callback, [context])

Backbone’s takes a context as the third argument, jQuery’s doesn’t. Looks like jQuery’s on is interpreting your third argument as the handler(eventObject) and trying to call it like a function, that would explain the error message that you’re seeing.

Normally you’d do it more like this:

MyView: Backbone.View.extend({
  events: {
    'change input': 'changeColor'
  },
  initialize: function() {
    this.colorInput = $("<input />", {
       "id": "color",
       "name": "color",
       "value": this.model.get("color")
    });
  },
  render: function() {
    this.$el.append(this.colorInput);
    return this;
  },
  changeColor: function() {
    var color = this.colorInput.val();
    this.model.set("color", color);
  }
});

and let Backbone’s event delegation system take care of things.