title: Simplest of backbone.js examples
body: <p>I'm creating a bare bones <a href="http://documentcloud.github.com/backbone" rel="noreferrer">backbone</a> example to try to learn it and am having issues getting my view to render.  I've based it on Thomas Davis's <a href="http://thomasdavis.github.com/2011/02/01/backbone-introduction.html" rel="noreferrer">tutorial</a> but looked at many of the other apps and tutorials available.</p>
  
  <p>I'm changing Davis's tutorial not only because I want to add an input box, but also because based on the backbone docs I thought it needed less code and a different structure.  Obviously because I can't get this to work, I don't know what's needed and what isn't.</p>
  
  <p>My ultimate goal was to just add the names in <code>li</code> tags within <code>ul#friends-list</code>, although I don't think <code>el: 'body'</code> will help me there.</p>
  
  <p>What am I doing wrong?  Thanks for any help.</p>
  
  <p>My html:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Tut&lt;/title&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;input type="text" placeholder="Enter friend's name" id="input" /&gt;
  &lt;button id="add-input"&gt;Add Friend&lt;/button&gt;
  
  &lt;ul id="friends-list"&gt;
  &lt;/ul&gt;
  &lt;script type="text/javascript" src="test.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My test.js</p>
  
  <pre><code>$(function() {
  
  Friend = Backbone.Model.extend();
  //Create my model
  
  var friends = new Friend([ {name: 'Eddard Stark'}, {name: 'Robert Baratheon'} ]);
  //Create new models to be used as examples
  
  
  FriendList = Backbone.Collection.extend({
      model: Friend
  });
  //Create my collection
  
  var friendslist = new FriendList;
  //Created to hold my friends model
  
  
  FriendView = Backbone.View.extend({
  
      tagName: 'li',
  
      events: {
          'click #add-input':  'getFriend',
      },
  
      initialize: function() {
          _.bindAll(this, 'render');
      }, 
  
      getFriend: function() {
          var friend_name = $('#input').val();
          var friend_model = new Friend({name: friend_name});
      },
  
      render: function() {
          console.log('rendered')
      },
  
  });
  
  var view = new FriendView({el: 'body'});
  });
  </code></pre>