संग्रह या मॉडल लाने पर ट्रिगर लोडिंग दृश्य

Question

मैं अब एक सप्ताह के लिए मैरियनेट का उपयोग कर रहा हूं और यह वास्तव में मेरे जीवन को आसान बना देता है!

अभी संग्रह या मॉडल प्राप्त होने पर मुझे उपयोगकर्ता को सूचित करने में सक्षम होना चाहिए, क्योंकि कुछ विचारों को प्रस्तुत करने/लाने के लिए पर्याप्त समय लगता है। एक उदाहरण देने के लिए मैं एक छोटे से mockup कर दिया है:

एक उपयोगकर्ता एक वर्ग पर क्लिक करता है, उस श्रेणी में सभी वस्तुओं का संग्रह लोड करने के लिए की जरूरत है। संग्रह प्राप्त होने से पहले मैं छवि में देखे गए लोडिंग व्यू को प्रदर्शित करना चाहता हूं (देखें 1)। इसे लागू करने के लिए एक सुरुचिपूर्ण समाधान क्या होगा। मुझे निम्न पोस्ट मिली है जहां उपयोगकर्ता एक fetch ट्रिगर सक्षम बनाता है: http://tbranyen.com/post/how-to-indicate-backbone-fetch-progress। ऐसा लगता है कि काम करना प्रतीत होता है लेकिन वास्तव में मैं नहीं चाहता था।

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

हालांकि यह अच्छा होगा मैं उदाहरण के लिए 'LoadItemView' नामक एक वैकल्पिक विशेषता हो सकता है: यह कुछ मैं के साथ आया है। जो एक fetch के दौरान आइटम दृश्य को ओवरराइड करेगा। क्या यह आपकी राय में एक अच्छा अभ्यास होगा?

Answer 1

कुछ दिन पहले, Derick बेली कठपुतली विकी में एक संभव समाधान तैनात: 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}) 
    } 
}) 

अब यह बेहतर है, मुझे लगता है।

Answer 3

उपयोग बैकबोन सिंक विधि

/* समन्वयन एप्लिकेशन हर अनुरोध प्रत्यक्ष 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

सामान्य रूप से, मैं डेटा लाने के दौरान एक प्रीलोडर लोड करने का सुझाव देना चाहता हूं, फिर संग्रह दिखा रहा हूं। कुछ ऐसा:

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