jQuery 如何在 Backbone.js 中添加鼠标悬停事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6583029/
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
How to add mouseover event in Backbone.js
提问by XMen
M Trying to give mouseoverevent in my view of Backbone, here is my view :
M 试图mouseover在我的 Backbone 视图中给出事件，这是我的观点：
Backbone.View.extend({
template :_.template( '<li class="<% if (refertype=="U"){%>info <% }else{%> access<%}%> main"><%=refername%>'+
'</li>'),
initialize: function() {
_.bindAll(this, 'render', 'close');
this.model.bind('change', this.render);
this.model.view = this;
},
events: {
"mouseover .main": "mouseovercard"
},
// Re-render the contents of the Card item.
render: function() {
this.el=this.template(this.model.toJSON());
$(".cards-list").append(this.el);
},
mouseovercard: function() {
console.log("hello world");
}
});
But when I am doing mouseover the mainclass it is not showing hello world, Please suggest what to do?
但是当我将鼠标悬停在main课程上时它没有显示hello world，请建议该怎么做？
Tried Heikki Answer but mouseover not working ?
试过 Heikki Answer 但鼠标悬停不起作用？
App.Backbone.CardView = Backbone.View.extend({
tagName: 'li',
className: 'main',
initialize: function() {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.model.view = this;
},
events:{
"mouseover .main": "mouseovercard"
},
// Re-render the contents of the Card item.
render: function() {
$(this.el)
.removeClass('info access')
.addClass(this.model.get('refertype') == 'U' ? 'info' : 'access')
.text(this.model.get('refername'));
$(".cards-list").append(this.el);
},
mouseovercard: function() {
console.log("hello world");
}
});
回答by Heikki
You are replacing the view's root element where the events are bound to.
您正在替换事件绑定到的视图的根元素。
Try this instead:
试试这个：
Backbone.View.extend({
tagName: 'li',
className: 'main',
events: {
'mouseover': 'mouseovercard'
},
initialize: function() {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function() {
$(this.el)
.removeClass('info access')
.addClass(this.model.get('refertype') == 'U' ? 'info' : 'access')
.text(this.model.get('refername'));
return this;
},
mouseovercard: function() {
console.log('hello world');
}
});
