kích hoạt chế độ xem tải khi bộ sưu tập hoặc mẫu được tìm nạp

Question

Tôi đã sử dụng Marionette trong một tuần và nó thực sự làm cho cuộc sống của tôi dễ dàng hơn!

Hiện tại tôi cần có thể thông báo cho người dùng khi bộ sưu tập hoặc mô hình đang được tìm nạp, vì một số lượt xem mất một lượng thời gian đáng kể để hiển thị/tìm nạp. Để đưa ra một ví dụ tôi đã thực hiện một mockup nhỏ:

Khi người dùng nhấp vào một thể loại, một bộ sưu tập của tất cả các mục trong loại đó cần phải được nạp. Trước khi bộ sưu tập được tìm nạp, tôi muốn hiển thị một khung nhìn tải như trong hình (xem 1). Điều gì sẽ là một giải pháp thanh lịch để thực hiện điều này. Tôi đã tìm thấy bài đăng sau đây mà người dùng bật trình kích hoạt tìm nạp: http://tbranyen.com/post/how-to-indicate-backbone-fetch-progress. Điều này dường như làm việc nhưng không thực sự như tôi muốn. Đây là điều tôi đã đưa ra:

var ItemThumbCollectionView = Backbone.Marionette.CollectionView.extend({ 
     collection: new ItemsCollection(userId), 
     itemView: ItemThumbView, 
     initialize: function(){ 
      this.collection.on("fetch", function() { 
       //show loading view 
      }, this); 
      this.collection.on("reset", function() { 
       //show final view 
      }, this); 
      this.collection.fetch(); 

      Backbone.history.navigate('user/'+identifier); 
      this.bindTo(this.collection, "reset", this.render, this) 
     } 
    }); 

Sẽ tốt hơn nếu tôi có thể có thuộc tính tùy chọn gọi là 'LoadItemView' chẳng hạn. Mà sẽ ghi đè lên mụcView trong khi tìm nạp. Đây có phải là một thực hành tốt trong ý kiến ​​của bạn?

Answer 1

Một vài ngày trước, Derick Bailey đăng tải một giải pháp khả thi trong rối Wiki: https://github.com/marionettejs/backbone.marionette/wiki/Displaying-A-%22loading-...%22-Message-For-A-Collection-Or-Composite-View

Answer 2

var myCollection = Backbone.Marionette.CollectionView.extend({ 
    initialize: function(){ 
     this.collection.on('request', function() { 
      //show loading here 
     }) 
     this.collection.on('reset', function() { 
      //hide loading here 
     }) 
     this.collection.fetch({reset: true}) 
    } 
}) 

Đó là tốt hơn bây giờ, tôi nghĩ.

Answer 3

phương pháp sử dụng Backbone sync

/* trên cưỡi của ứng dụng đồng bộ hóa mọi yêu cầu đến nghe trừ ajax trực tiếp */

Backbone._sync = Backbone.sync; 
Backbone.sync = function(method, model, options) { 
    // Clone the all options 
    var params = _.clone(options); 

params.success = function(model) { 
    // Write code to hide the loading symbol 
    //$("#loading").hide(); 
    if (options.success) 
     options.success(model); 
}; 
params.failure = function(model) { 
    // Write code to hide the loading symbol 
    //$("#loading").hide(); 
    if (options.failure) 
     options.failure(model); 
}; 
params.error = function(xhr, errText) { 
    // Write code to hide the loading symbol 
    //$("#loading").hide(); 
    if (options.error) 
     options.error(xhr, errText); 
}; 
// Write code to show the loading symbol 
    //$("#loading").show(); 
Backbone._sync(method, model, params); 

};

Answer 4

Nói chung, tôi khuyên bạn nên tải trình tải trước trong khi tìm nạp dữ liệu, sau đó hiển thị bộ sưu tập. Một cái gì đó như:

region.show(myPreloader); 
collection.fetch().done(function() { 
    region.show(new MyCollectionView({ collection: collection }); 
});