Intentar vincular una callback al pasar la function arroja un error

Solo deseo activar un evento cuando una input cambia de valor usando jQuery 1.7.2 y Backbone.js.

Actualmente tengo lo siguiente (que funciona)

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

Intentaba hacerlo de otra manera donde simplemente paso en mi function.

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

Pero al tratar de hacerlo de esa manera, arroja el error

((jQuery.event.special [handleObj.origType] || {}). handle || handleObj.handler) .apply no es una function
.apply (coincide con.elem, args);

( línea 3332 )

Que no puedo descifrar ¿Alguna idea de por qué esta manera no funciona?

Estás confundiendo a jQuery on :

.on (events [, selector] [, datos], controller (eventObject))
.on (events-map [, selector] [, datos])

con Backbone on :

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

El Backbone toma un context como tercer argumento, jQuery's no. Parece que jQuery's on está interpretando su tercer argumento como el handler(eventObject) e intentando llamarlo como una function, eso explicaría el post de error que está viendo.

Normalmente lo harías más como esto:

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

y deje que el sistema de delegación de events de Backbone se encargue de todo.

Esto es para los Googlers que se encuentran con este problema. Tuve exactamente este mismo problema y lo que ocurrió fue que el lugar donde se informó el error y dónde ocurrió realmente el error se encontraba en dos lugares diferentes.

Una línea de código era obsoleta y parecía algo así

 $('#modal').on('click', function(e) { // Execute invalid code here. }); 

La otra línea de código era similar:

 $('#modal').on('click', function(e) { // Execute valid code here. }); 

El error fue que la primera invocación no era una function verdadera, por lo que el error era exacto, el segundo manejador invocado no era una verdadera function y jQuery no podía completarlo, pero siempre actuaba como si ocurriera en la segunda llamada de function .

Yo diría que si se encuentra con este error, elimine los controlleres de events adicionales que puedan activarse y vea si eso detiene el problema.