In my app, there are different user accounts. What I'm trying to do is, show a loader.gif till the time .fetch() is fetching the content from resource url + rendering the views and hide the loader when fetching is done.

Now, when a user logs in, his list of TODO items is fetched by Todos.fetch and on success callback, loader.gif fades out.

$("#app").hide();
$(".loader").show();
Todos.fetch({
    success: function(){
            $("#app").show();
            $(".loader").hide();
        }
});

This works fine for all user except those which have no Todo items. For these users, success callback is not triggered and loader.gif stays. Is there any other way to hide the loader.gif?

It seems to me that success function is called only when even a single model is added to the collection. If there is nothing to add to the collection, success isn't called.

In my app, there are different user accounts. What I'm trying to do is, show a loader.gif till the time .fetch() is fetching the content from resource url + rendering the views and hide the loader when fetching is done.

Now, when a user logs in, his list of TODO items is fetched by Todos.fetch and on success callback, loader.gif fades out.

$("#app").hide();
$(".loader").show();
Todos.fetch({
    success: function(){
            $("#app").show();
            $(".loader").hide();
        }
});

This works fine for all user except those which have no Todo items. For these users, success callback is not triggered and loader.gif stays. Is there any other way to hide the loader.gif?

It seems to me that success function is called only when even a single model is added to the collection. If there is nothing to add to the collection, success isn't called.

• javascript
• backbone.js
• callback

• 3 Some code to demonstrate your problem would help. – nikoshr Commented Nov 13, 2012 at 14:58
• Added the code. Although I don't think there's any issue with the code because when there is Todo items to load i.e when there is something to add to Todos collection, the function is called. Though, when there is nothing to be added to the Todos collection, the function is not called. – Apoorv Parijat Commented Nov 13, 2012 at 15:18

1 Answer 1

BackboneJS fetch delegates to sync. sync returns a jqXHR object for your own use.

You could just:

Todos.fetch({
    success: function(){
            $("#app").show();
            $(".loader").hide();
        }
}).always(function() { $(".loader").hide() });

You can read more about it in this blog post.

Apart from that, make sure that your server returns a valid json when the collection is empty. If the response is not a valid json you will get a failure.