Javascript Backbone.js 视图 - 将事件绑定到“el”之外的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8274257/
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
Backbone.js views - binding event to element outside of "el"
提问by William
The 2nd answer to thisquestion nicely explains how event declarations in Backbone.js views are scoped to the view's elelement.
这个问题的第二个答案很好地解释了 Backbone.js 视图中的事件声明如何限定在视图el元素的范围内。
It seems like a reasonable use case to want to bind an event to an element outside the scope of el, e.g. a button on a different part of the page.
想要将事件绑定到 范围之外的元素似乎是一个合理的用例el，例如页面不同部分上的按钮。
What is the best way of achieving this?
实现这一目标的最佳方法是什么？
采纳答案by Bartek
Update: This answer is no longer valid/right. Please see other answers below!
更新：此答案不再有效/正确。请参阅下面的其他答案！
Why do you want to do this?
你为什么要这样做？
Apart from that, you could always just bind it using regular jQuery handlers. E.g.
除此之外，您始终可以使用常规 jQuery 处理程序绑定它。例如
$("#outside-element").click(this.myViewFunction);
IIRC, Backbone.js just uses the regular jQuery handlers, so you're essentially doing the same thing, but breaking the scope :)
IIRC，Backbone.js 只使用常规的 jQuery 处理程序，所以你基本上做同样的事情，但打破了范围:)
回答by Sander
there is not really a reason you would want to bind to an element outside the view, there are other methods for that.
没有真正的理由想要绑定到视图之外的元素，还有其他方法可以做到这一点。
that element is most likely in it's own view, (if not, think about giving it a view!)
since it is in it's own view, why don't you just do the binding there, and in the callback Function,
use .trigger();to trigger an event.
该元素最有可能在它自己的视图中，（如果没有，请考虑给它一个视图！）因为它在它自己的视图中，为什么不直接在那里进行绑定，并在回调函数中，使用来触发一个事件。.trigger();
subscribe to that eventin your current view, and fire the right code when the event is triggered.
在当前视图中订阅该事件，并在触发事件时触发正确的代码。
take a look at this example in JSFiddle, http://jsfiddle.net/xsvUJ/2/
看看 JSFiddle 中的这个例子，http://jsfiddle.net/xsvUJ/2/
this is the code used:
这是使用的代码：
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({});
});
