Binding of DOM events to backbone view methods

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    
    <script data-require="underscore.js" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
    <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="backbone.js" data-semver="1.1.2" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Binding of DOM events to View methods</h1>
  </body>

</html>

// Add your javascript here
$(function(){
  $("h1").animate({
    "margin-left": "120px"
  }, "slow");
  
   var ListView = Backbone.View.extend({
    el: $('body'), // this el attaches to existing element
    events: {
      'click button#add': 'addItem' //button event defined here
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem'); // every function that uses 'this' as the current object should be in here
      this.counter = 0; // total number of items added
      this.render();
    },

    render: function(){
      $(this.el).append("<button id='add'>Add list item</button>").append("<ul></ul>");
    },
    
    addItem: function(){
      this.counter++;
      $('ul', this.el).append("<li>List item "+this.counter+"</li>");
    }
  });
  var listView = new ListView();
});

/* Put your css in here */

h1 {
  color: red;
}