同样地,我们可以将绑定的事件都移除,并通过一个events 对象来代理,这个events对象包含事件类型和选择器到回调函数的映射。这和elements 对象非常类似,格式是这样的:
events: {events: { "submit form": "submit"}
让我们继续,将它添加至我们的SearchView 控制器,和refreshElements() 类似,我们使用delegateEvents() 函数,当控制器实例化的时候调用它。这会解析控制器的events 对象,将它绑定至事件回调。在这个SearchView 例子中,我们希望视图的
<form/> 提交的时候调用函数
search() :var exports = this;jQuery(function($){
exports.SearchView = Controller.create({
// 所有事件名称、选择器和回调的映射
events: {
"submit form": "search"
},
init: function(){
// ...
this.delegateEvents();
},
search: function(e){ /* ... */ },
// 私有
// 根据第1 个空格来分割
eventSplitter: /^(\w+)\s*(.*)$/,
delegateEvents: function(){
for (var key in this.events) {
var methodName = this.events[key];
var method = this.proxy(this[methodName]);
var match = key.match(this.eventSplitter);
var eventName = match[1], selector = match[2];
添加少量上下文
if (selector === ' ') {
this.el.bind(eventName, method);
} else {
this.el.delegate(selector, eventName, method);
}
}
}});
注意,这里在delegateEvents() 中使用到了delegate() 函数,包括bind() 函数。如果没有提供事件选择器,这个事件将会直接放在el 上。否则就将这个事件“委托”,在匹配选择器的子元素中触发了这个类型的事件时调用它。这种委托机制有一个优势,就是在含有大量事件监听的场景中,不必给每个元素都添加监听,因为当事件冒泡的时候会动态地触发相应的事件回调。我们可以将这个增强版的控制器添加至之前的Controller 库,这样在每个控制器中都能重用它们了。这个是最终的示例代码,你可以在这里找到所有的控制器库代码:<p>
var exports = this;jQuery(function($){
exports.SearchView = Controller.create({
elements: {
"input[type=search]": "searchInput",
"form": "searchForm"
},
events: {
"submit form": "search"
},
init: function(){ /* ... */ },
search: function(){
alert("Searching: " + this.searchInput.val());
return false;
},
});
new SearchView({el: "#users"});