Магистральный вид, инициализация и рендеринг

Question

У меня есть вид скелета, который загружает subview. Когда я загружаю subview, я хотел бы показать загрузчика, когда данные извлечения нужных данных и скрыть загрузчик, когда представление будет готово к рендерингу.

я сделал что-то вроде этого:

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

На данный момент мой суб-вид загрузки коллекции и реализуется следующим образом:

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

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

Мой взгляд югу загрузить коллекцию синхронно, потому что это единственный способ, который я нашел, когда мой взгляд «готов» к рендерингу, но я думаю, что это не лучший способ использовать Backbone.

Что мне делать?

Answer 1

Существует несколько способов сделать это.

1. Вы можете явно использовать шаблон pubsub. Что-то вроде этого:

   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. Вы можете прикрепить функцию к событиям ajaxStart/ajaxStop на вертушка себе:

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