EVC - Backbone Test MVC

by AaronLayton

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>

CSS

body { 
    background:url(http://jootix.com/upload/DesktopWallpapers/cache/Wood-Texture-wood-texture-1920x1200.jpg);
    font-family: Helvetica, Arial, sans-serif;
    padding:30px;
}

.list-item {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background: #F4F4F4 !important;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#F4F4F4)) !important;
    background: -webkit-linear-gradient(white, #F4F4F4) !important;
    background: -moz-linear-gradient(center top, white 0%, #F4F4F4 100%) !important;
    background: -moz-gradient(center top, white 0%, #F4F4F4 100%) !important;
    background: -ms-linear-gradient(white, #F4F4F4) !important;
    background: -o-linear-gradient(white, #F4F4F4) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    zoom: 1;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 1;
    position: relative;
    color: #434343;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    padding: 5px;
    margin: 0px 0px 10px 0px;
}
.list-item .button-green {
    float:right;
    margin:0 0 0 5px;
}


.button-grey {
  font-family: Arial;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  /* font colouring*/
  margin:0 0 15px 0;
  color: #666666;
  cursor:pointer;
  padding: 7px 13px;
  text-decoration: none;
  text-transform: uppercase;
  width: auto;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid rgba(169, 169, 169, 0.19999999999999996);
  background-color: #f5f5f5;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#cfcfcf));
 ...

JavaScript

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',
    events: {
        'click span.swap':'swap',
        'click span.delete':'remove'
    },
    initialize: function(){
        _.bindAll(this, 'render', 'unrender', 'swap', 'remove');
        
        this.model.bind('change', this.render);
        this.model.bind('remove', this.unrender);
    },
    render: function(){
        $(this.el).html("<div class='list-item'>" + this.model.get('part1') + " " + this.model.get('part2') + "<span class='delete button-green'>Delete</span><span class='swap button-green'>Swap</span></div>");
        return this;
    },
    unrender: function(){
        $(this.el).remove();
        console.log("Should be gone");
    },
    swap: function(){
        var swapped = {
            part1: this.model.get('part2'),
            part2: this.model.get('part1')
        }
        this.model.set(swapped);
    },
    remove: function(){
        this.model.destroy();
       console.log("called"); 
    }
});

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(){
        var self = this;
        
        $(this.el).append("<button id='add' class='button-grey'>Add list item</button>");
        $(this.el).append("<ul></ul>");
        
        // Loop through all the items in the collection
        _(this.collection.models).each(function(item){
            self.appendItem(item);
        }, this);
        
   ...