Javascript 在主干视图中绑定多种事件类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10811067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Binding multiple event types in backbone views
提问by stephenmuss
I was wondering if it is possible to bind multiple event types in backbone within a single line.
我想知道是否可以在一行中绑定多个主干中的事件类型。
Consider the following:
考虑以下：
var MyView = Backbone.View.extend({
id: 'foo',
events: {
'click .bar': 'doSomething',
'touchstart .bar': 'doSomething'
},
doSomething: function(e) {
console.log(e.type);
}
});
Basically what I am wondering is if it is possible to combine the event binding for 'click' and 'touchstart' into one line - along the lines of:
基本上我想知道的是是否可以将“click”和“touchstart”的事件绑定合并为一行 - 沿着以下几行：
events: { 'click,touchstart .bar': 'doSomething' }
Any suggestions would be appreciated.
任何建议，将不胜感激。
采纳答案by stephenmuss
For anyone interested I ended up overriding delegateEventsin Backbone.View.
对于任何感兴趣的人，我最终覆盖delegateEvents了 Backbone.View。
There are only a few modified lines to get the desired functionality.
只需修改几行即可获得所需的功能。
You can see a diff in my commit on github
你可以在我在 github 上的提交中看到一个差异
Here is delegateEventsin its modified state:
这是delegateEvents它的修改状态：
delegateEvents: function(events) {
if (!(events || (events = getValue(this, 'events')))) return;
this.undelegateEvents();
for (var key in events) {
var method = events[key];
if (!_.isFunction(method)) method = this[events[key]];
if (!method) throw new Error('Method "' + events[key] + '" does not exist');
var match = key.match(delegateEventSplitter);
var eventTypes = match[1].split(','), selector = match[2];
method = _.bind(method, this);
var self = this;
_(eventTypes).each(function(eventName) {
eventName += '.delegateEvents' + self.cid;
if (selector === '') {
self.$el.bind(eventName, method);
} else {
self.$el.delegate(selector, eventName, method);
}
});
}
}
回答by rinat.io
It's impossible for views jQuery events, which are bound through delegateEvents. It's is possible for backbone events, though:
视图 jQuery 事件不可能通过delegateEvents. 不过，主干事件是可能的：
book.on("change:title change:author", ...);
回答by ElHymaniste
We could also do it as below. With the advantage to manage space between each event.
我们也可以这样做。具有管理每个事件之间空间的优势。
Add it in Backbone directly :
直接将其添加到 Backbone 中：
delegateEvents: function(events) {
events || (events = _.result(this, 'events'));
if (!events) return this;
this.undelegateEvents();
for (var key in events) {
var method = events[key];
if (!_.isFunction(method)) method = this[method];
if (!method) continue;
var match = key.match(delegateEventSplitter);
this.delegate(match[1], match[2], _.bind(method, this));
}
return this;
}
Override delegateEvents method :
覆盖 delegateEvents 方法：
Backbone.View.prototype.originalDelegateEvents = Backbone.View.prototype.delegateEvents;
Backbone.View.prototype.delegateEvents = function(events) {
events || (events = _.result(this, 'events'));
if (!events) return this;
this.undelegateEvents();
for (var key in events) {
var method = events[key], combinedEvents = key.split(',');
if (!_.isFunction(method)) method = this[method];
if (!method) continue;
for(var i = 0, match = null; i < combinedEvents.length; ++i) {
match = combinedEvents[i].trim().match(/^(\S+)\s*(.*)$/);
this.delegate(match[1], match[2], _.bind(method, this));
}
}
return this;
};
We could now manage events in one line :
我们现在可以在一行中管理事件：
events: {
'click a[data-anchor], wheel, keydown': 'scroll'
}
