关于javascript：尝试通过传入函数来绑定回调会抛出错误

Trying to bind a callback by passing in the function throws an error

我只想在输入使用 jQuery 1.7.2 和 Backbone.js 更改值时触发一个事件。

目前我有以下(有效)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

我试图用另一种方式来做，我只是传入我的函数。

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

但是当试图这样做时，它会抛出错误

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

(第 3332 行)

我无法弄清楚。任何想法为什么这种方式不起作用？

你混淆了 jQuery 的 on:

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

与 Backbone 的 on:

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

Backbone 将上下文作为第三个参数，而 jQuery 没有。看起来 jQuery 的 on 正在将您的第三个参数解释为 handler(eventObject) 并尝试像函数一样调用它，这将解释您看到的错误消息。

通常你会这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

让 Backbone 的事件委托系统来处理。