0

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.

sublime
  • 4,013
  • 9
  • 53
  • 92

2 Answers2

1

If I understood you correctly, you will have a grid of thumbmails (say 30 thumbnails) and back/forward buttons.

What I would do is make your collection represent ONLY the items in view and use your back/forward buttons to alter a this.page property and then re-fetch() the entire collection (replacing the 30 thumbnails inside with 30 on the next page).

This piece of code is a good example of how to set up a paginated collection and your paginated view.

Toli
  • 5,547
  • 8
  • 36
  • 56
  • I'm sorry if I'm not clear enough. I'm talking about a grid layout of thumbnails, say 500 on a single page, and as you scroll down, I'm requesting more and more. I have create all placeholders ( all 500 ) thumbnails, because the would give container div appropriate height so I have to have all 500 models in the collection ( although dummy ) – sublime Feb 08 '13 at 18:50
0

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" />
Dennis Rongo
  • 4,611
  • 1
  • 25
  • 25
  • Yes every model has a data associated with it in the backend, but currently it's completely empty ( not just urls but id's as well ) I'm then going to request them and add all those attributes to it's corresponding model as you scroll. I want to know if it's the right way of doing it, or is there a better way – sublime Feb 08 '13 at 18:55
  • Why don't you add an `id` on them as well and treat them like actual records? It should be fine either way though but I don't see it being an issue not having it as actual `Models` with an `id` since they can be removed or edited for whatever reason. – Dennis Rongo Feb 08 '13 at 21:11
  • Because I can't get ID's when until I actually call the service ( assuming id on client model is same as id of that object represented on backend ) – sublime Feb 08 '13 at 22:46
  • Right, so insert those records in the DB and do a fetch() on it. If you can't do that than you can just hard code your `Models` temporarily and swap it out when those records gets inserted in the DB. – Dennis Rongo Feb 08 '13 at 22:51
  • I think if you swap the models, it will remove all the events that are attached to that model, am I right? – sublime Feb 09 '13 at 00:24
  • The events are tied to the `Model` at time of declaration so essentially, you can bind to those events at any time. – Dennis Rongo Feb 09 '13 at 00:31