3.js

Jump To … +

1.js 2.js 3.js 4.js 5.js

3.js
¶

This example illustrates how to use a Collection of Models to store data, and how to tie changes in those to a View.

Working example: 3.html.

Go to Example 4
¶
```
(function($){
```
¶

Item class: The atomic part of our Model. A model is basically a Javascript object, i.e. key-value pairs, with some helper functions to handle event triggering, persistence, etc.
```
  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });
```

List class: A collection of Items. Basically an array of Model objects with some helper functions.

  var List = Backbone.Collection.extend({
    model: Item
  });

  var ListView = Backbone.View.extend({
    el: 'body',
    events: {
      'click button#add': 'addItem'
    },

initialize() now instantiates a Collection, and binds its add event to own method appendItem. (Recall that Backbone doesn’t offer a separate Controller for bindings…).

    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem'); // remember: every function that uses 'this' as the current object should be in here

      this.collection = new List();
      this.collection.on('add', this.appendItem); // collection event binder

      this.counter = 0;
      this.render();
    },
    render: function(){
      this.$el.append("<button id='add'>Add list item</button>");
      this.$el.append("<ul></ul>");

the last argument this make sures that the this within the callback function refers to ListView

      this.collection.each(function(item){ // in case collection is not empty
        this.appendItem(item);
      }, this);
    },

addItem() now deals solely with models/collections. View updates are delegated to the add event listener appendItem() below.

    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
        part2: item.get('part2') + this.counter // modify item defaults
      });
      this.collection.add(item); // add item to collection; view is updated via event 'add'
    },

appendItem() is triggered by the collection event add, and handles the visual update.

    appendItem: function(item){
      $('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
    }
  });

  var listView = new ListView();
})(jQuery);

¶

Follow me on Twitter: @r2r