Backbone

by kuyabiye

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

JavaScript

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

    var ListView = Backbone.View.extend({
        el: $('body'),
        
        events: {
            'click #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">Add Item</button>');
         $(this.el).append('<ul></ul>');   
            
            _(this.collection.models).each(function(item) {
                self.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) {
             $('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");

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