5.js

Jump To … +

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

5.js
¶

This example introduces two new Model actions (swap and delete), illustrating how such actions can be handled within a Model’s View.

Working example: 5.html.

(function($){

  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });

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

  var ItemView = Backbone.View.extend({
    tagName: 'li', // name of tag to be created

ItemViews now respond to two clickable actions for each Item: swap and delete.

    events: {
      'click span.swap':  'swap',
      'click span.delete': 'remove'
    },

initialize() now binds model change/removal to the corresponding handlers below.

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

      this.model.on('change', this.render);
      this.model.on('remove', this.unrender);
    },

render() now includes two extra spans corresponding to the actions swap and delete.

    render: function(){
      this.$el.html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
      return this; // for chainable calls, like .render().el
    },

unrender(): Makes Model remove itself from the DOM.

    unrender: function(){
      this.$el.remove();
    },

swap() will interchange an Item‘s attributes. When the .set() model function is called, the event change will be triggered.

    swap: function(){
      var swapped = {
        part1: this.model.get('part2'),
        part2: this.model.get('part1')
      };
      this.model.set(swapped);
    },

¶

remove(): We use the method destroy() to remove a model from its collection. Normally this would also delete the record from its persistent storage, but we have overridden that (see above).
```
    remove: function(){
      this.model.destroy();
    }
  });
```

Because the new features (swap and delete) are intrinsic to each Item, there is no need to modify ListView.

  var ListView = Backbone.View.extend({
    el: 'body', // el attaches to existing element
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem'); // 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>");
      this.collection.each(function(item){ // in case collection is not empty
        this.appendItem(item);
      }, this);
    },
    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
        part2: item.get('part2') + this.counter // modify item defaults
      });
      this.collection.add(item);
    },
    appendItem: function(item){
      var itemView = new ItemView({
        model: item
      });
      $('ul', this.el).append(itemView.render().el);
    }
  });

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

¶

Follow me on Twitter: @r2r