Vista de red troncal, inicializar y renderizar

Question

Tengo una vista de red troncal que carga la subvista. Cuando cargo una subvista, me gustaría mostrar un cargador cuando la vista recupera los datos necesarios y ocultar el cargador cuando la vista está lista para procesarse.

he hecho algo como esto:

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

Por ahora, mi sub-view cargar una colección y se lleva a cabo de esta manera:

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

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

Mi opinión sub cargar la colección de forma sincrónica, ya que es La única forma en que descubrí saber cuándo mi vista está "lista" para su procesamiento, pero creo que esta no es la mejor manera de usar Backbone.

¿Qué puedo hacer?

Answer 1

Hay varias formas de hacerlo.

1. Puede utilizar explícitamente el patrón pubsub. Algo como esto:

   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. Puede adjuntar una función para los eventos ajaxStart/ajaxStop en el spinner sí:

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

3. O puede utilizar jQuery.ajaxSetup:

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