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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With