Question

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

Answer 1

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.