How to properly use Backbone.js Collections for displaying lists

backbone.js, javascript

Solution

Keep in mind that you can write multiple `Backbone.View`s 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.

Problem

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

Original source