Question

我刚开始使用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中有没有正确的方法呢？

Answer 1

Backbone View的events哈希仅查看该视图$el中的内容。

如果您想在单击其他玩家时移除玩家的突出显示，您可以在玩家收藏视图中呈现您的玩家视图，该视图可以监视点击事件。然后你可以：

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

如果您想处理所有点击，无论它们是否出现在Backbone.View的$ el中，那么您可能确实想要使用全局处理程序。

注意，未经测试。

如果您发布应用程序结构的详细信息，可能会建议更好的解决方案。

Answer 2

   $(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)
.....

文档点击的Backbone JS事件

2 个答案: