this 问题的第二个答案很好地解释了 Backbone.js 视图中的事件声明如何限定为视图的 el 元素。
将事件绑定到el 范围之外的元素似乎是一个合理的用例，例如页面不同部分的按钮。
实现这一目标的最佳方法是什么？
【问题讨论】：
没有真正的理由要绑定到视图之外的元素， 还有其他方法。
那个元素很可能在它自己的视图中，（如果不是，考虑给它一个视图！）
既然它在它自己的视图中，你为什么不在那里进行绑定，并在回调函数中，
使用 .trigger(); 触发事件。
subscribe to that event 在当前视图中，并在触发事件时触发正确的代码。
看看 JSFiddle 中的这个例子，http://jsfiddle.net/xsvUJ/2/
这是使用的代码：
var app = {views: {}};
app.user = Backbone.Model.extend({
defaults: { name: 'Sander' },
promptName: function(){
var newname = prompt("Please may i have your name?:");
this.set({name: newname});
}
});
app.views.user = Backbone.View.extend({
el: '#user',
initialize: function(){
_.bindAll(this, "render", "myEventCatcher", "updateName");
this.model.bind("myEvent", this.myEventCatcher);
this.model.bind("change:name", this.updateName);
this.el = $(this.el);
},
render: function () {
$('h1',this.el).html('Welcome,<span class="name"> </span>');
return this;
},
updateName: function() {
var newname = this.model.get('name');
console.log(this.el, newname);
$('span.name', this.el).text(newname);
},
myEventCatcher: function(e) {
// event is caught, now do something... lets ask the user for it's name and add it in the view...
var color = this.el.hasClass('eventHappened') ? 'black' : 'red';
alert('directly subscribed to a custom event ... changing background color to ' + color);
this.el.toggleClass('eventHappened');
}
});
app.views.sidebar = Backbone.View.extend({
el: '#sidebar',
events: {
"click #fireEvent" : "myClickHandler"
},
initialize: function(){
_.bindAll(this, "myClickHandler");
},
myClickHandler: function(e) {
window.user.trigger("myEvent");
window.user.promptName();
}
});
$(function(){
window.user = new app.user({name: "sander houttekier"});
var userView = new app.views.user({model: window.user}).render();
var sidebarView = new app.views.sidebar({});
});
【讨论】：
更新：这个答案不再有效/正确。请参阅下面的其他答案！
你为什么要这样做？
除此之外，您总是可以使用常规的 jQuery 处理程序绑定它。例如
$("#outside-element").click(this.myViewFunction);
IIRC，Backbone.js 只使用常规的 jQuery 处理程序，所以你基本上在做同样的事情，但打破了范围 :)
【讨论】：