Chế độ xem xương sống, khởi tạo và hiển thị

Question

Tôi có chế độ xem xương sống tải chế độ xem phụ. Khi tôi tải một subview, tôi muốn hiển thị một bộ nạp khi khung nhìn lấy dữ liệu cần thiết và ẩn bộ nạp khi khung nhìn đã sẵn sàng để render.

tôi đã làm một cái gì đó như thế này:

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

Còn bây giờ, tôi phụ xem tải một bộ sưu tập và được thực hiện như thế này:

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

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

xem tiểu My tải bộ sưu tập đồng bộ bởi vì nó là cách duy nhất tôi tìm thấy để biết khi xem của tôi là "sẵn sàng" để render nhưng tôi nghĩ rằng đây không phải là cách tốt nhất để sử dụng Backbone.

Tôi nên làm gì?

Answer 1

Có một số cách để thực hiện.

1. Bạn có thể sử dụng mẫu pubsub một cách rõ ràng. Một cái gì đó như thế này:

   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. Bạn có thể đính kèm một chức năng để các sự kiện ajaxStart/ajaxStop trên spinner bản thân:

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

3. Hoặc bạn có thể sử dụng jQuery.ajaxSetup:

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