我刚开始使用 Backbone JS,我正在创建一个 Backbone View 。我制作了这个 View ,所以当您单击模板时,它会调用函数 highlight
将 highlight
类添加到我的元素中:
var PlayerView = Backbone.View.extend({
// ...
events: {
"click .player": "highlight"
},
// ...
highlight: function () {
this.$el.find('.player').addClass('highlight');
}
});
我想这样做,当我点击应用程序中的其他任何地方时,我从这个元素中删除了 highlight
类。
我可以在 document
上声明一个点击处理程序并从那里删除 highlight
类:
$(document).click(function () {
$('.player.highlight').removeClass('highlight');
});
然后在高亮函数中使用event.stopPropagation()
防止冒泡:
var PlayerView = Backbone.View.extend({
// ...
highlight: function (evt) {
evt.stopPropagation();
this.$el.find('.player').addClass('highlight');
}
});
这有效并展示了我正在寻找的功能。然而,这并没有完全利用主干框架。在 Backbone JS 中有这样做的正确方法吗?
最佳答案
主干 View 的 events
哈希仅查看该 View 的 $el
中的内容。
如果你想在点击另一个玩家时移除玩家的高亮,你可以在玩家 Collection View 中呈现你的玩家 View ,它可以观察点击事件。然后你可以:
handleClick: function(e) {
this.$(".player").removeClass('highlight');
this.$(e.currentTarget).addClass('highlight');
}
如果您想要处理所有点击,无论它们是否发生在 Backbone.View 的 $el 中,那么您可能确实想要使用全局处理程序。
请注意,未经测试。
如果您发布应用程序结构的详细信息,或许可以建议更好的解决方案。
关于javascript - 单击文档时的 Backbone JS 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20461027/