Backbone-Ansicht, initialisieren und Rendern

Question

Ich habe eine Backbone-Ansicht, die Unteransicht laden. Wenn ich eine Unteransicht lade, möchte ich ein Ladeprogramm anzeigen, wenn das Ansichts-Fetch-Objekt Daten benötigt, und das Ladeprogramm ausblenden, wenn das Sichtfenster zum Rendern bereit ist.

Ich habe so etwas wie dies:

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(); 
    } 
}); 

Vorerst meine Unteransicht, die eine Sammlung geladen werden und wird wie folgt umgesetzt:

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

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

Meine Unteransicht synchron die Sammlung geladen werden, da es Die einzige Art, wie ich herausgefunden habe, wann meine Ansicht "bereit" zum Rendern ist, aber ich denke, dies ist nicht der beste Weg, um Backbone zu verwenden.

Was soll ich tun?

Answer 1

Es gibt mehrere Möglichkeiten, dies zu tun.

1. Sie können das pubsub-Muster explizit verwenden. Etwas wie folgt aus:

   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. Sie eine Funktion zu den ajaxStart/ajaxStop Ereignisse auf dem Spinner selbst anbringen kann:

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

3. Oder Sie können jQuery.ajaxSetup verwenden:

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