title: Backbone: Adding a model to Collection and render a View
body: <p>I'm building a simple Backbone app where I mainly have a view with a list of books (book name + cover image) and another view where I want to add new books to the list. </p>
  
  <p>When I use a sample data the view with the books renders properly, but when I try to add books to the list it doesn't work and I don't know which is the problem.</p>
  
  <p>Here is the JSFiddle <a href="http://jsfiddle.net/swayziak/DRCXf/4/" rel="nofollow">http://jsfiddle.net/swayziak/DRCXf/4/</a> and my code:</p>
  
  <p>HTML:
     </p>
  
  <pre><code>   &lt;section class="menu"&gt;
        &lt;ul class="footer"&gt; 
          &lt;li&gt;&lt;a href=""&gt;List of Books&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#edit"&gt;Edit&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/section&gt;
  
     &lt;section class="feed"&gt;&lt;/section&gt; 
  
     &lt;script id="bookTemplate" type="text/template"&gt;
         &lt;img src="&lt;%= image %&gt;"/&gt;
         &lt;h2 class="bookTitle"&gt;&lt;%= title %&gt;&lt;h2&gt;
     &lt;/script&gt;
  
     &lt;script id="aboutTemplate" type="text/template"&gt; About &lt;/script&gt;
  
     &lt;script id="editTemplate" type="text/template"&gt;
         &lt;form id="addBook" action="#"&gt;
             &lt;label for="title"&gt;Book Title&lt;/label&gt;&lt;input type="text" id="title"&gt;
             &lt;label for="image"&gt;Image Link&lt;/label&gt;&lt;input type="text"/ id="image"&gt;
             &lt;button id="add-book"&gt;Button&lt;/button&gt;                
         &lt;/form&gt;
     &lt;/script&gt;                
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the Backbone code:</p>
  
  <pre><code>app = {};
  </code></pre>
  
  <p>// Sample Data</p>
  
  <pre><code>var books = [
      {title:'Imperial Bedrooms', image:'http://upload.wikimedia.org/wikipedia/en/thumb/e/e8/Imperial_bedrooms_cover.JPG/200px-Imperial_bedrooms_cover.JPG
      },
  
      {title:'Less than zero', 
      image:'http://d.gr-assets.com/books/1282271923l/9915.jpg' 
      },
  </code></pre>
  
  <p>];</p>
  
  <p>//Router     </p>
  
  <pre><code>app.Router = Backbone.Router.extend({
      routes: {
          '' : 'home',
          'about' : 'about',
          'edit' : 'edit',
      },
  
      home: function () {
          if(!this.bookListView){
              this.bookListView = new app.BookListView(books);
          }else{
          this.bookListView.render();
          }
      },
  
      about: function () { 
          if (!this.aboutView) {
              this.aboutView = new app.AboutView();
          }
          $('.feed').html(this.aboutView.render().el);
      },
  
      edit: function () {
          if (!this.editView) {
              this.editView = new app.EditView();
          );
              $('.feed').html(this.editView.render().el);
      }
  
  });
  </code></pre>
  
  <p>// Model</p>
  
  <pre><code>app.Book = Backbone.Model.extend({
      defaults: {
          title:'',
          image:'',       
      }
  });
  </code></pre>
  
  <p>// Collection    </p>
  
  <pre><code>app.BookList = Backbone.Collection.extend ({
      model: app.Book 
  });
  </code></pre>
  
  <p>// Book View    </p>
  
  <pre><code>app.BookView = Backbone.View.extend ({
      tagName: 'div',
      className: 'book',
  
      template: _.template( $( '#bookTemplate' ).html()),
  
      render: function() {
          this.$el.html(this.template(this.model.toJSON()));
          return this;
     }
  });
  </code></pre>
  
  <p>// List of Books View</p>
  
  <pre><code>app.BookListView = Backbone.View.extend({
      el: '.feed',
  
      initialize: function ( initialBooks ) {
          this.collection = new app.BookList (initialBooks);
          this.render();
          this.listenTo( this.collection, 'add', this.renderBook );
      },
  
      render: function() {
          this.$el.empty();
  
          this.collection.each(function( item ){
              this.renderBook( item );
          }, this);
      },
  
      renderBook: function ( item ) {
           var bookview = new app.BookView ({
                model: item
      });            
  
      this.$el.append( bookview.render().el );
      } 
  });
  </code></pre>
  
  <p>// Add books view</p>
  
  <pre><code>app.EditView = Backbone.View.extend({
    tagName: 'div',
    className: 'edit',
  
    template: _.template( $( '#editTemplate' ).html()),
  
    events:{
       "click #add-book":"addBook"
    },
  
     addBook:function(e){
          e.preventDefault();
  
          var title = this.$el.find("#title").val();
          var image = this.$el.find("#image").val();
          var bookModel = new app.Book({title:"title",image:'image'});    
      },
  
    render: function () {
        this.$el.html(this.template());
        return this;
     }
  });
  </code></pre>
  
  <p>// About View</p>
  
  <pre><code>app.AboutView = Backbone.View.extend({
      tagName: 'div',
      className: 'about',
  
      template: _.template( $( '#aboutTemplate' ).html()),
  
      render: function () {
          this.$el.html(this.template());
          return this;
       }
  });
  </code></pre>
  
  <p>});    </p>
  
  <pre><code>var router = new app.Router();
  Backbone.history.start();
  </code></pre>
  
  <p>I think the problem is related with the Home router, the app.BookListView and the app.EditView, but I'm not sure of that.</p>
  
  <p>Any help is welcomed.</p>
  
  <p>Thanks.</p>