javascript 单击“Backbone.js 视图”中的事件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12033933/
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
Click Event in 'Backbone.js View' do not work
提问by chen yang
I tried to start to work with backbone.js, but I found the Event does not work when I do NOT use 'body' as the View's el. Here is the code. You can save it as a html file and run it.
我试图开始使用backbone.js，但我发现当我不使用'body'作为视图的el时事件不起作用。这是代码。您可以将其另存为 html 文件并运行它。
<html>
<body>
<button id='openEssay'>test</button>
<div id='div' style='width:100px;height:100px;'></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script><script>
(function($){
var AppView = Backbone.View.extend({
el:'body',//success
//fail el:'#div',
//fail tagName: 'li',
//fail id:'div',
initialize:function(){
_.bindAll(this, 'openEssay');
},
events:{
'click button#openEssay':'openEssay'
},
openEssay:function(){
alert('a');
}
});
var app = new AppView();
})(jQuery);
</script>
</body>
</html>
回答by mu is too short
Backbone binds the event handlers to the view's this.elusing the delegation form of on(or delegatein older Backbones), see Backbone.View#delegateEventsfor details. So if you want these events:
Backbonethis.el使用委托形式on（或delegate在较旧的 Backbone 中）将事件处理程序绑定到视图，Backbone.View#delegateEvents有关详细信息，请参阅。所以如果你想要这些事件：
events: {
'click button#openEssay':'openEssay'
}
to do anything then this.$el.find('button#openEssay')needs to match something (where thisis, of course, the view object). Only one of your four attempts:
做任何事情都this.$el.find('button#openEssay')需要匹配一些东西（this当然，视图对象在哪里）。您的四次尝试中只有一次：
el: 'body'el:'#div'tagName: 'li'id: 'div'
el: 'body'el:'#div'tagName: 'li'id: 'div'
will put <button id="openEssay">inside this.elso only (1)will call openEssaywhen you hit the button. If you put your button inside #divthen (2)would also work.
将放在<button id="openEssay">里面，this.el所以只有(1)会openEssay在您按下按钮时调用。如果你把你的按钮放在里面，#div那么(2)也可以。
回答by Agnaldo Junior
the answer above was very helpfull to me, especially when it comes to modularization, in my case i'm trying to build a specie of View component to be used in anyone view. But the part of events always does nothing, to fix that, i just put in my component view el: 'body', too easy
上面的答案对我非常有帮助，尤其是在模块化方面，就我而言，我正在尝试构建一种可在任何视图中使用的 View 组件。但是事件的部分总是什么都不做，为了解决这个问题，我只是在我的组件视图中放入了 el: 'body'，太简单了
var RoleView = BaseView.extend({
el: 'body',
template : doT.template(RoleTemplate),
model : new SessionModel(),
events: {
"click #open-RoleModal" : "_OpenRoleModal",
"click #normal-Role": "_makeRole"
},
initialize:function(options){
BaseView.prototype.initialize.call(this,options);
},
_OpenRoleModal: function(){
//it works
},
_makeRole : function() {
//it works
},
close: function(){
this.$el.empty().off();
}
});