CODEWITHSUNDEEP
javascriptbackbone.js
user1031947
user1031947

Reputation: 6664

How to properly use Backbone.js Collections for displaying lists

I am just getting started with Backbone and am confused on a point.

I have a page that displays a list of documents.

Clicking on a document in the list opens the full document for editing.

From what I understand, the proper way to model this list in Backbone is as a Collection of document Models.

var DocList = Backbone.Collection.extend({
  model: document
});

However the document Model will be large, with many properties. The list doesn't need to display all of that information.

I am wondering if it is preferable to have something like the following...

var ShortDoc = Backbone.Model.extend({});
var shortDoc = new Doc({ 
  id: id,
  title: docTitle 
});
var DocList = Backbone.Collection.extend({
  model: shortDoc
});

...where shortDoc contains only the properties necessary for the purpose of generating a list.

Or is it preferable to use a Collection with the document Model in its entirety?

Thanks (in advance) for your help

Upvotes: 3

Views: 1181

Answers (2)

David Palita
David Palita

Reputation: 1293

There are 3 different concepts in your question title (class, instance and presentation of data).

Your definitions should be something like :

var Doc = Backbone.Model.extend({});
var DocList = Backbone.Collection.extend({
    url: '/docs',
    model: Doc
});

If you don't have defaults then there is no data at this stage of execution. Then you start populating your collection with models that can have their complete set of data (or just some of it), either by creating them client side :

var myDocList = new DocList();
myDocList.create({title: 'The first doc'}); 
/* no need for an id here if you're using centralized persistence, because 
"create" calls "save" witch in turn does an http post to your server which 
should return a JSON representation of your model including its id (Backbone 
will include it in your model). */

or reading them server side :

var myDocList = new DocList();
myDocList.fetch();
/* Backbone will do an http get at DocList.url and create Doc instances with the
   JSON array it should receive from your server*/

As for the representation of your docList, if it is either long or complex HTML, you really should append your items to a newly created element then append this element to your document, it could be easily be around 10 times faster than repainting for each item.

Upvotes: 0

rjz
rjz

Reputation: 16510

Keep in mind that you can write multiple Backbone.Views for the same model. While you might have a DetailView that presents the entire document, you're also free to create an ItemView to showcase the important parts of each document as in a list view. While your DetailView will include a kitchen sink, the ItemView could be limited to showing off a title:

var MyItemView = Backbone.View.extend({
  tagName: 'li',
  render: function () {
    this.$el.html('<h3>' + this.model.get('title') + '</h3>');
    return this;
  }
});

Finally, if it's the volume of data that you're concerned about: many Backbone applications opt to keep a collection for each type of model used in the application. Their state needs to be maintained somewhere; why not in a nice, organized list? You don't need to bootstrap every model attribute when the application loads. You might instead opt to load a title (or whatever you need to render the initial list), and put off fetching the model until the user requests any details.

Upvotes: 4

Related Questions