JSFiddle - React, Tailwind, and code Playground

by aldomatic

HTML

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>hello-backbonejs</title>
  </head>
  <body>
  <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
  </body>
  </html>

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 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'>Add list 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);