Ładowanie widok ładowania podczas pobierania lub pobrania modelu

Question

Używam Marionetki już od tygodnia i to naprawdę ułatwiło mi życie!

W tej chwili potrzebuję być w stanie powiadomić użytkownika, gdy kolekcja lub model jest pobierane, ponieważ niektóre widoki zajmują znaczną ilość czasu do renderowania/pobierania. Aby dać przykład Zrobiłem mały makieta:

Gdy użytkownik kliknie na kategorii, zbiór wszystkich pozycji w tej kategorii muszą zostać załadowane. Zanim kolekcja zostanie pobrana, chcę wyświetlić widok ładujący widoczny na obrazku (widok 1). Jakie byłoby eleganckie rozwiązanie do wdrożenia tego. Znalazłem następujący wpis, w którym użytkownik włącza wyzwalacz pobierania: http://tbranyen.com/post/how-to-indicate-backbone-fetch-progress. To wydaje się działać, ale nie bardzo, jak chciałem. To jest coś wymyśliłem:

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

Byłoby miło, ale jeśli mogę mieć opcjonalny atrybut o nazwie „LoadItemView” na przykład. Które zastąpiłoby itemView podczas pobierania. Czy uważasz, że jest to dobra praktyka?

Answer 1

Kilka dni temu, Derick Bailey napisali możliwe rozwiązanie w Marionetek 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}) 
    } 
}) 

Lepiej teraz, myślę.

Answer 3

metoda Korzystanie Backbone sync

/* na jeździe synchronizacji aplikacji każde żądanie pochodzi usłyszeć oprócz bezpośredniego AJAX */

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

Ogólnie proponuję załadować preloader podczas pobierania danych, a następnie pokazać kolekcję. Coś jak:

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