CODEWITHSUNDEEP
backbone.jsmarionette
Boedy
Boedy

Reputation: 7703

trigger loading view when collection or model fetched

I've been using Marionette for a week now and it really made my life easier!

Right now I need to be able to notify a user when a collection or model is being fetched, because some views take a significant amount of time to render/fetch. To give an example I've made a small mockup:

https://i.sstatic.net/IU3BP.png

When a user clicks on a category, a collection of all items within that category need to be loaded. Before The collection is fetched I want to display a loading view as seen in the image (view 1). What would be an elegant solution to implement this. I've found the following post where a user enables a fetch trigger: http://tbranyen.com/post/how-to-indicate-backbone-fetch-progress . This seems to work but not really like I wanted to. This is something I came up with:

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

It would be nice though If I could have an optional attribute called 'LoadItemView' for example. Which would override the itemView during a fetch. Would this be a good practice in your opinion?

Upvotes: 8

Views: 8795

Answers (4)

chridam
chridam

Reputation: 103345

In general, I'd suggest loading a preloader while fetching data, then showing the collection. Something like:

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

Upvotes: 0

Harish.bazee
Harish.bazee

Reputation: 668

Use Backbone sync method

/* over riding of sync application every request come hear except direct 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);

};

Upvotes: 0

Frank Fang
Frank Fang

Reputation: 2162

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

It's better now, I think.

Upvotes: 0

rzschoch
rzschoch

Reputation: 358

A few days ago, Derick Bailey posted a possible solution in the Marionette Wiki: https://github.com/marionettejs/backbone.marionette/wiki/Displaying-A-%22loading-...%22-Message-For-A-Collection-Or-Composite-View

Upvotes: 1

Related Questions