2012-07-31 47 views
3

我们已经使用Backbone几个月,但我们认为在共享具有可见视图的模型时必须有更好的方式处理隐藏视图。例如,我们有一个“视图段”视图和一个“编辑段”视图,两者都代表“段”模型。其中一个总是隐藏在任何给定的时刻,但是,仍然在听同样的事件(包括ajax调用)。我们隐藏视图vs替换的原因在于,我们希望尽量减少视图之间的加载时间,因为视图显示大量的数据和dom元素。我们认为隐藏的视图不需要渲染,直到可见。管理与可见视图共享同一模型的隐藏骨干视图

是否有适当的(最佳实践)方法来处理这种情况?你将如何处理这个问题?是否有一种简单的方法来临时禁用整个视图的事件监听?

+0

更新:我应该澄清,我也想关闭由模型更改触发的事件的监听。 – soultrust 2012-08-01 08:33:07

回答

1

一个简单的想法: 我想你可以使用delegateEvents Backbone.Viewt提供,当你想要显示活动的EditSegment第一次使用undelegateEvents动态消除ViewSegment,则delegateEvents undelegateEvents方法动态设置活动动态初始化EditSegment Events。

编辑-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 = []; 
    }, 
+0

(un)delegateEvents只关闭侦听您在视图的'events'对象中定义的事件的事件。我想关闭模型更改的聆听。 – soultrust 2012-08-01 08:30:27

+0

@TomoSuzuki嗨,看到我的更新,可以实现对您的要求的适当更改。 – 2012-08-01 13:47:18

3

我的意见总是听模式的转变时,当模型改变我呈现它。我想对你来说也是一样,所以当一个模型被提取(你的意思是ajax调用)时,你不需要任何东西。在渲染(并在模式改变你的听力方法),你可以验证是否可见:

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

而且还宣称事件只是工作,如果你的观点的主要元素是可见的,只需添加在选择的前缀:在您的任何子选择器之前可见:

"click :visible .button" : "buttonClickHandler" 
6

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

hide -method视图,我们称之为unbindEvents并在show方法我们称之为bindEvents。就那么简单。我们还在initialize方法中调用bindEvents,在remove方法中调用unbindEvents以避免僵尸视图。

我们不关心JavaScript事件,因为它们通常没有得到上隐藏视图解雇(大部分ARE点击或更改驱动)

顺便说一句,以避免渲染一堆的HTML即会从不显示,我们推迟视图的第一次渲染,直到第一次显示,所以在show方法中,我们测试this.isRendered(布尔值,默认为false),如果未设置,我们在显示视图之前渲染视图并设置它为真。