javascript - 单击文档时的 Backbone JS 事件

Question

我刚开始使用 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 中有这样做的正确方法吗？

Answer 1

主干 View 的 events 哈希仅查看该 View 的 $el 中的内容。

如果你想在点击另一个玩家时移除玩家的高亮，你可以在玩家 Collection View 中呈现你的玩家 View ，它可以观察点击事件。然后你可以:

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

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

请注意，未经测试。

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