Question

我们一直在使用Backbone几个月，但我们认为在共享具有可见视图的模型时必须有更好的方法来处理隐藏的视图。例如，我们有一个“View Segment”视图和一个“Edit Segment”视图，它们都代表一个“Segment”模型。其中一个总是隐藏在任何给定的时刻，但是，仍然听到与另一个相同的事件（包括ajax调用）。我们为什么只是隐藏视图与替换的原因是我们希望最小化更改视图之间的加载时间，因为视图显示了大量数据和dom元素。我们认为隐藏视图在被显示之前不必呈现。

是否有适当的（最佳实践）方法来处理此方案？你会如何处理这个问题？是否有一种简单的方法可以暂时禁用整个视图的事件监听？

Answer 1

我们使用与显示和编辑视图完全相同的方案。我们已将所有模型绑定逻辑收集到bindEvents方法中，并使用unbindEvents方法对其进行补充。

在视图的hide - 方法中，我们调用unbindEvents，在show方法中调用bindEvents。就那么简单。我们还会调用bindEvents方法中的initialize和unbindEvents方法中的remove来避免僵尸视图。

我们不关心javascript事件，因为它们通常不会被隐藏的视图触发（大多数是点击或更改驱动）

顺便说一句，为了避免渲染一堆永远不会显示的html，我们将视图的第一次渲染推迟到第一次显示，所以在show方法中我们测试this.isRendered （布尔值，默认为false）如果未设置，我们在显示之前渲染视图并将其设置为true。

Answer 2

当我更改模型时，我的视图总是会听模型的更改事件。我想你也一样，所以当一个模型被提取时（你的意思是ajax调用）你不想做任何事情。在渲染中（以及在模型更改的监听方法中），您可以验证是否可见：

render : function(){
  if( !this.$el.is(":visible") ){
    //skipping any render action because our view is hidden
    return this;
  }
}

并且只有在视图的主要元素可见时才声明事件才有效，只需在选择器中添加前缀：在任何子选择器之前显示：

"click :visible .button" : "buttonClickHandler"

Answer 3

一个简单的想法：我想你可以使用delegateEvents Backbone.Viewt提供和undelegateEvents方法来动态设置事件，当你想显示 EditSegment 首先使用undelegateEvents动态取消 ViewSegment 的事件，然后delegateEvents动态初始化 EditSegment 事件。

EDIT-20120801：关于model.unbind

    bindTo: function(model, ev, callback) {
        model.bind(ev, callback, this);
        this.bindings.push({
            model: model,
            ev: ev,
            callback: callback
        });
    },

    _unbindFromAll: function() {
        _.each(this.bindings, function(binding) {
            binding.model.unbind(binding.ev, binding.callback);
        });
        this.bindings = [];
    },

管理与可见视图共享相同模型的隐藏Backbone视图

3 个答案: