Populating backbone collection with empty models as placeholders

Question

I'm writing a web application using backbone. I am going to display a list of thumbnails in grid format on a webpage.

I have created a view called PhotosView, which is listening to backbone collection

PhotosView = Backbone.View.extend({
    template: _.template( $('#container').html() ),

Then for each photo I've created another view, which represents each thumbnail in that list

EachPhotoView = Backbone.View.extend({
    template: _.template($('#thumbnail').html()),

Photos view is listening to a collection, and on reset event it creates EachPhotoView for all the photos that are to be displayed. EachPhotoView then listens to a model associated with it for change event.

I'm now trying to paginate these thumbnail. I'm now going to ask for only those thumbnails that are in view, but I still have to create placeholders for all the images.

So my question is, is it a good idea to populate collection with number of empty backbone models, and In future when I actually get those models, replace them from collections. This will solve my problem of having placeholder. Is there any other way of doing this?

EDIT: I'm talking about a grid layout of thumbnails, say 500 on a single page, and as you scroll down, I'm requesting parts in those 500. I have to create all placeholders ( all 500 ) thumbnails, because that would give container div appropriate height (for 500 images) so I have to have all 500 models in the collection ( although dummy ) that will help me attach events on the view to those empty models and as I get those thumbnails metadata, I'll add it in it's corresponding model in collection.

empty model with default attributes that is attached to a view, so view shows some kind of generic image till actual image is loaded — sublime

Dennis Rongo Dennis Rongo · Accepted Answer · 2013-02-08T18:42:44

Each Model that are in place already has a record associated with it somewhere, I assume. If not, your Data Source should contain them and your client-side View will render them based on that Collection records. The only thing missing is, the corresponding Image is currently not available for some of these records.

Those Models will have a property of imgSource that will be empty. Your View will then handle and perform a check if whether the imgSource property is empty and replace it some default Thumbnail.

<img src="<%- imgSource ==='' ? '/images/default.jpg' : '/images/'+ imgSource %>" 
   alt="imgDesc" />

Populating backbone collection with empty models as placeholders

2 Answers