Question

I’d like to show a loading message until the collection view and it’s subviews have been completely rendered.

Answer 1

you can speicfy an emptyView to render when a collection has no items in it. the collection view will handle this automatically. any time it sees the collection drop to zero items, it will render this instead. use that to show your “loading” message.

LoadingMessageView = Backbone.ItemView.extend({
  template: "#loading-message-template"
});

ItemView = Backbone.ItemView.extend({
  template: "#normal-item-view"
});

MyCollectionView = Backbone.CollectionView.extend({
  emptyView: LoadingMessageView,
  itemView: ItemView
});

Then in your code, you can pass a collection that has not yet been loaded in to the view, show it, and then load it.

var col = new MyCollection();
var colView = new MyCollectionView({
  collection: col
});

App.someRegion.show(colView);

col.fetch();

This will render and show the collection view, displaying the loading message from the emptyView initially. When the collection finishes it’s fetch, the “reset” event will trigger and the collection view will re-render with all of the items.