我试图在鼠标进入/退出与BackboneJS中的视图关联的HTML元素时触发事件:
MyApp.Views.ListShow = Backbone.CompositeView.extend({
tagName: 'div',
className: 'list-show group',
template: JST['listShow'],
events: {
'mouseover .list-show': 'toggleRemoveCard',
'mouseout .list-show': 'toggleRemoveCard'
},
initialize: function () {
this.listenTo(this.model, 'sync', this.render);
this.listenTo(this.model.cards(), 'sync', this.render);
},
render: function () {
var content = this.template({list: this.model});
this.$el.html(content);
return this;
},
toggleRemoveCard: function (event) {
event.preventDefault();
console.log("toggling");
this.$('.remove-card').toggleClass('hidden');
}
});
似乎在events
哈希中,我可以引用嵌套在.list-show
内的任何HTML元素。但是,如何在事件中引用.list-show
本身?上述编写events
的方式似乎不起作用;知道原因也很好。谢谢!
修改****: 结果我只需要删除事件中的类选择器,并将其更改为
'mouseover': 'toggleRemoveCard',
'mouseout': 'toggleRemoveCard'