title: backbone view render not creating
body: <p>Just beginning with backbone and after few hours can't seem to get even a view render working correctly.  I've included all appropriate JavaScript files in HTML. Here is my script:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>(function($) { 
  // MODELS
  var Paper = Backbone.Model.extend ({
      defaults : {
          title : null,
          author: null,
      }
  });
  
  // COLLECTIONS
  var PaperCollection = Backbone.Collection.extend({
      model : Paper,
      initialize : function() {
          console.log("We've created our collection");
      }
  });
  
  // VIEWS
  var PaperView = Backbone.View.extend({
      tagName:'li',
      className: 'resultTable',
      events: {
          'click .ptitle':'handleClick'
      },
  
      initialize: function() {
          _.bindAll(this, 'render', 'handleClick');
      },
  
      render: function() {
          $(this.el).html('&lt;td&gt;'+this.model.get('title')+'&lt;/td&gt;');
          return this; // for chainable calls
      },
  
      handleClick: function() {
          alert('Been clicked');
      }
  });
  
  
  var ListView = Backbone.View.extend({
      events: {
      //"keypress #new-todo":  "createOnEnter",
  },
  
      initialize : function() {
          console.log('Created my app view');
          _.bindAll(this, 'render', 'addOne', 'appendOne');
  
          this.collection = new PaperCollection();
          this.collection.bind('add', this.appendOne); // collection event binder
  
          this.counter = 0;
          this.render();
      },
  
      render : function() {
          console.log('Render app view');
          $(this.el).append("&lt;button id='add'&gt;Add list item&lt;/button&gt;");
          $(this.el).append("&lt;p&gt;More text&lt;/p&gt;");
    // $(this.el).append("&lt;ul&gt;&lt;/ul&gt;");
  
    /*
          _(this.collection.models).each(function(item){      // in case collection is not empty
      appendOne(item);
    }, this); */
      },
  
      addOne: function() {
    this.counter++;
    var p = new Paper();
    p.set({
      title: "My title: " + this.counter // modify item defaults
    });
    this.collection.add(p);
      },
  
      appendOne: function(p) {
      var paperView = new PaperView({
      model: p
    });
    $('ul', this.el).append(paperView.render().el);
  }
  });
  
  var App = new ListView({el: $('paper_list') });
  // App.addOne();
  
  })(jQuery);
  </code></pre>
  
  <p>Note not getting any errors in console on FF - but still not displaying any of the render outputs in AppView). Appreciate any help. Simple HTML:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;body&gt;
      &lt;div class="container_16"&gt;
  
  
          &lt;div class="grid_16"&gt;
              &lt;div id="paper_list"&gt;
                  Text...
  
                  &lt;ul class="thelist"&gt;&lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>