3

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

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

4

3 回答 3

6

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

在hide视图的 - 方法中，我们调用unbindEvents并在show方法中调用bindEvents. 就那么简单。我们还调用了bindEventsininitialize方法和unbindEventsinremove方法来避免僵尸视图。

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

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

于 2012-08-01T19:55:44.477 回答
3

当模型更改我渲染它时，我的视图总是监听模型的更改事件。我想你也一样，所以当一个模型被获取时（你的意思是 ajax 调用）你什么都不想要。在您的渲染中（以及在模型更改的侦听方法中）您可以验证是否可见：

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

并且还声明事件仅在您的视图的主要元素可见时才起作用，只需在选择器中添加前缀 :visible 在您的任何子选择器之前：

"click :visible .button" : "buttonClickHandler"
于 2012-07-31T04:58:49.320 回答
1

一个简单的思路：我觉得可以使用Backbone.Viewt提供的delegateEvents和undelegateEvents方法来动态设置Events，当要显示EditSegment时先使用undelegateEvents动态取消ViewSegment的Events，然后delegateEvents动态初始化EditSegment的Events。

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 = [];
    },
于 2012-07-31T02:39:04.637 回答