gpt4 book ai didi

javascript - 主干事件不适用于 object.function

转载 作者:行者123 更新时间:2023-12-03 11:22:27 26 4
gpt4 key购买 nike

我正在尝试通过对象委托(delegate)我的事件。但是该事件不会触发,如果我直接引用它(“click .formations div”:this.movement.leaveCell)它将抛出一个JS错误

events: {
"click .formations div":"enterCell", //option A
"click .save ":"movement.leaveCell", //option B
"click .save ":function(ev){this.movement.leaveCell(ev, this);}, //option C currently works
},
enterCell: function(ev){
$(ev.currentTarget).addClass('highlight');
},
movement: {
leaveCell: function(ev){
$(ev.currentTarget).removeClass('highlight');
}
},

如何让选项 B 发挥作用?

最佳答案

从 Backbone 的源代码中,您可以看到负责事件委托(delegate) delagateEvents 的方法

delegateEvents: function(events) {
if (!(events || (events = _.result(this, 'events')))) return this;
this.undelegateEvents();
for (var key in events) {
var method = events[key];
if (!_.isFunction(method)) method = this[events[key]];
if (!method) continue;

var match = key.match(delegateEventSplitter);
var eventName = match[1], selector = match[2];
method = _.bind(method, this);
eventName += '.delegateEvents' + this.cid;
if (selector === '') {
this.$el.on(eventName, method);
} else {
this.$el.on(eventName, selector, method);
}
}
return this;
},

从这里您可以看到 delegateEvents() 的 native 实现不会处理您的情况。它将尝试搜索不正确的 movement.leaveCell

如果你想强制 Backbone.View 按照你的方式去做,你应该重写这个方法。

<小时/>

更新

Here是一个简单的工作 fiddle ,带有重写的 delegateEvents 方法。

Backbone.View.prototype.delegateEvents = function(events) {
if (!(events || (events = _.result(this, 'events')))) return this;
this.undelegateEvents();
for (var key in events) {
var method = events[key];
if (!_.isFunction(method)) {
var behaviors = method.split('.');
if(behaviors.length > 1) {
method = this[behaviors[0]][behaviors[1]];
} else {
method = this[events[key]];
}

}
if (!method) continue;

var match = key.match(/^(\S+)\s*(.*)$/);
var eventName = match[1], selector = match[2];
method = _.bind(method, this);
eventName += '.delegateEvents' + this.cid;
if (selector === '') {
this.$el.on(eventName, method);
} else {
this.$el.on(eventName, selector, method);
}
}
return this;
};

此示例适用于一层深度的对象,但不再适用。

我会推荐你​​看看Marionette.jsMarionette.Behaviors ,它也旨在分离 View 及其行为。

关于javascript - 主干事件不适用于 object.function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27041234/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com