单击文档时的Backbone JS事件

Backbone JS event on document click

本文关键字：JS 事件 Backbone 文档 单击      更新时间：2024-05-27

我是使用Backbone JS的新手，我正在创建一个Backbone视图。我制作了这个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中有正确的方法吗？

Backbone View的events散列只查看该视图的$el中的内容。

如果你想在点击另一个玩家时删除玩家的高亮显示，你可以在玩家集合视图中渲染你的玩家视图，该视图可以观察点击事件。然后你可以：

handleClick: function(e) { 
    this.$(".player").removeClass('highlight');
    this.$(e.currentTarget).addClass('highlight');
}

如果你想处理所有点击，而不管它们是否发生在Backbone.View的$el中，那么你可能确实想使用全局处理程序。

注意，未经测试。

如果您发布应用程序结构的详细信息，也许可以建议一个更好的解决方案。

   $(document).on('click', function(e){
        Backbone.trigger('document-click-event', e);
    });

var Popup = Marionette.CompositeView.extend({
   ........
    initialize: function(options) {
      _.extend(this, options);
      this.listenTo(Backbone, 'document-click-event', function(e) {
         if (!$(e.target).closest(this.el).length && !$(e.target).closest(this.field).length && !$(e.target).closest('.ui-datepicker').length) {
            this.hide();
         }
      }, this)
.....
相关文章：