バックボーンビュー、初期化、レンダリング

Question

私はサブビューをロードするバックボーンビューを持っています。私は、サブビューを読み込むときに、ビューの取得に必要なデータがローダーに表示され、ビューのレンダリング準備ができたらローダーが非表示になります。ですので

var mySubView = Backbone.View.extend({ 
    initialize: function() { 
     this.myCollection.fetch({ 
      async: false 
     }); 
    }, 

    render: function() { 
     // Code to render 
    } 
}); 

私の子ビューを同期コレクションをロード：今のところ、私のサブビューは、コレクションをロードし、このように実装されて

var appView = Backbone.View.extend({ 
    showLoader: function() { 
     // Code to show loader 
    }, 

    hideLoader: function() { 
     // Code to hide loader 
     }, 

    loadSubView: function() { 
     this.showLoader(); 
     var myView = new MySubView(); 
     this.$el.html(myView.render().el); 
     this.hideLoader(); 
    } 
}); 

：

は、私はこのような何かをしました自分のビューがレンダリングする準備ができていることを知っている唯一の方法だが、これはバックボーンを使用する最良の方法ではないと私は思う。

どうすればいいですか？

Answer 1

いくつかの方法があります。

1. 明示的にpubsubパターンを使用できます。このような何か：あなたは自分自身スピナー にajaxStart/ajaxStopイベントに機能を付加することができ

   var AppView = Backbone.View.extend({ 
       showLoader: function() { 
        console.log('show the spinner'); 
       }, 
   
       hideLoader: function() { 
        console.log('hide the spinner'); 
       }, 
   
       loadSubView: function() { 
        this.showLoader(); 
        var subView = new SubView(); 
        subView.on('render', this.hideLoader); 
        this.$el.html(subView.render().el); 
   
       } 
   }); 
   
   var SubView = Backbone.View.extend({  
       render: function() { 
        console.log('a subView render'); 
        this.trigger('render'); 
        return this; 
       } 
   }); 
   
   var appView = new AppView({el: $('body')}); 
   appView.loadSubView(); 
   

   http://jsfiddle.net/theotheo/qnVhy/

2. ：

   var AppView = Backbone.View.extend({ 
       initialize: function() { 
        var _this = this; 
        this.$('#spinner') 
         .hide() 
         .ajaxStart(_this.showLoader) 
         .ajaxStop(_this.hideLoader); 
       } 
       ... 
   } 
   

3. それとも、jQuery.ajaxSetupを使用することができます。

   var AppView = Backbone.View.extend({ 
        initialize: function() { 
         var _this = this; 
         jQuery.ajaxSetup({ 
          beforeSend: _this.showLoader, 
          complete: _this.hideLoader, 
          success: function() {} 
         }); 
        } 
       ... 
       }