hello-backbonejs-step5.coffee

# Rewrote excellent intro to Backbone.js http://arturadib.com/hello-backbonejs/ in CoffeeScript

$ ->
      Backbone.sync = (method, model, success, error) ->
        success()

      class Item extends Backbone.Model
        defaults:
          part1: 'hello'
          part2: 'world'

      class List extends Backbone.Collection
        model: Item

      class ItemView extends Backbone.View
        tagName: 'li'

        events:
          'click span.swap':  'swap'
          'click span.delete': 'remove'

        initialize: ->
          _.bindAll @, 'render', 'unrender', 'swap', 'remove'

          @model.bind 'change', @render
          @model.bind 'remove', @unrender

        render: ->
          $(@el).html '<span style="color:black;">'+@model.get('part1')+' '+@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>'
          this

        unrender: ->
          $(@el).remove()

        swap: ->
          swapped =
            part1: this.model.get 'part2'
            part2: this.model.get 'part1'

          @model.set swapped

        remove: ->
          this.model.destroy()

      class ListView extends Backbone.View
        el: $('body')

        events:
          'click button#add': 'addItem'

        initialize: ->
          _.bindAll @, 'render', 'addItem', 'appendItem'

          @collection = new List
          @collection.bind 'add', @appendItem

          @counter = 0
          @render()

        render: ->
          $(@el).append "<button id='add'>Add list item</button>"
          $(@el).append "<ul></ul>"
          _(@collection.models).each (item) -> appendItem item, @

        addItem: ->
          @counter++
          item = new Item
          item.set part2: item.get('part2') + this.counter
          @collection.add item

        appendItem: (item) ->
          itemView = new ItemView model: item
          $('ul', @el).append itemView.render().el

      listView = new ListView

hello-backbonejs-step5.js

//for javascript version with comments see: http://arturadib.com/hello-backbonejs/5.js

$(function(){

  Backbone.sync = function(method, model, success, error){
    success();
  }

  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

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

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

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

    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;
    },

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

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


  var ListView = Backbone.View.extend({
    el: $('body'),
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem'); 

      this.collection = new List();
      this.collection.bind('add', this.appendItem);

      this.counter = 0;
      this.render();
    },
    render: function(){
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
      _(this.collection.models).each(function(item){
        appendItem(item);
      }, this);
    },
    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
        part2: item.get('part2') + this.counter 
      });
      this.collection.add(item);
    },
    appendItem: function(item){
      var itemView = new ItemView({
        model: item
      });
      $('ul', this.el).append(itemView.render().el);
    }
  });

  var listView = new ListView();
});