backbone on rails example

Reference: http://arturadib.com/hello-backbonejs/docs/5.html  http://thomasdavis.github.com/2011/02/01/backbone-introduction.html and 

http://backbonetutorials.com/

app/views/items/index.html

<h1>Listing items</h1>

<script type="text/template" id="create_item_template">
  <label>New Item: </label>
  name <input type="text" id="name_input" />
  description <input type="text" id="description_input" />
  <input type="button" id="create_button" value="Create" />
</script>

<script type="text/javascript">
ItemModel = Backbone.Model.extend({
    urlRoot: '/items',
    defaults: {
        name: '',
        description: '',
    },
    toFullJSON: function() {return JSON.stringify(this.toJSON()); },
});

ItemCollection = Backbone.Collection.extend({
  model: ItemModel,
  toFullJSON: function() {
    return this.map(function(model){ return model.toFullJSON(); });
  },
});

ItemView = Backbone.View.extend({
  tagName: 'li',
  events: {
    'click span.delete': 'remove',
  },
  initialize: function() {
    _.bindAll(this, 'render', 'unrender', 'remove') // every function that uses 'this' as the current object should be in here
    this.model.change('change', this.render);
    this.model.bind('remove', this.unrender);
  },
  render: function() {
    $(this.el).html('Name: '+this.model.get('name')+' description: '+this.model.get('description')
                     +' <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
    return this;// for chainable calls, like .render().el
  },
  unrender: function() {
    $(this.el).remove();
  },
  remove: function() {
    this.model.destroy();
  },
});

ListView = Backbone.View.extend({
  el: $('body'),
  events: {
      'click #create_button': 'doCreateItem',
  },
  initialize: function(){
    _.bindAll(this, 'render', 'doCreateItem', 'appendItem'); // every function that uses 'this' as the current object should be in here
    
    this.collection = new ItemCollection();
    this.collection.bind('add', this.appendItem); // collection event binder

    this.counter = 0;
    this.render();
  },
  render: function(){
    var self = this;
    var template = _.template( $("#create_item_template").html(), {} );
    $(this.el).append(template);
    $(this.el).append("<ul></ul>");
    _(this.collection.models).each(function(item){ // in case collection is not empty
      self.appendItem(item);
    }, this);
  },

  doCreateItem: function() {
    // Button clicked, you can access the element that was clicked with event.currentTarget
    var item = new ItemModel();
    var self = this;
    item.save({name: $("#name_input").val(), description: $("#description_input").val()},
      {success: function (item) {
          self.collection.add(item);
      }
    });
    // // Another way of pass this to callback function
    // item.save({name: $("#name_input").val(), description: $("#description_input").val()},
    //   {success: function (item) {
    //       this.collection.add(item);
    //   }.bind(this)      
    // });
  },
  appendItem: function(item){
    var itemView = new ItemView({
      model: item
    });
    $('ul', this.el).append(itemView.render().el);
  }
});

var listView = new ListView();
var itemList = new ItemCollection();
itemList.fetch({url:'/items.json',
  success: function(itemList) {
    itemList.each(function(model){
      listView.appendItem(model);
    });
  }
});
</script>

Source code:  https://github.com/jimmyntu/backbone_on_rails_example