Rückgrat: Hinzufügen eines Modells für die Erhebung und das Rendern einer Ansicht

Baue ich eine einfache Backbone-app, wo ich hauptsächlich eine Ansicht mit einer Liste der Bücher (book name + cover-Bild) und einer anderen Ansicht, wo ich will neue Bücher hinzufügen, um der Liste.

Wenn ich mit einem sample-Daten werden in der Ansicht der Bücher macht richtig, aber wenn ich versuche, um Bücher auf der Liste, es funktioniert nicht und ich weiß nicht, was das problem ist.

Hier ist das JSFiddle http://jsfiddle.net/swayziak/DRCXf/4/ und mein code:

HTML:

   <section class="menu">
      <ul class="footer"> 
        <li><a href="">List of Books</a></li>
        <li><a href="#edit">Edit</a></li>
        <li><a href="#about">About</a></li>
      </ul>
   </section>

   <section class="feed"></section> 

   <script id="bookTemplate" type="text/template">
       <img src="<%= image %>"/>
       <h2 class="bookTitle"><%= title %><h2>
   </script>

   <script id="aboutTemplate" type="text/template"> About </script>

   <script id="editTemplate" type="text/template">
       <form id="addBook" action="#">
           <label for="title">Book Title</label><input type="text" id="title">
           <label for="image">Image Link</label><input type="text"/ id="image">
           <button id="add-book">Button</button>                
       </form>
   </script>                

</div>

Und die Backbone-code:

app = {};

//Beispieldaten

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' 
    },

];

//Router

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);
    }

});

//Modell

app.Book = Backbone.Model.extend({
    defaults: {
        title:'',
        image:'',       
    }
});

//Sammlung

app.BookList = Backbone.Collection.extend ({
    model: app.Book 
});

//Buch-Ansicht

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;
   }
});

//Liste der Bücher, die Ansicht

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 );
    } 
});

//Bücher hinzufügen view

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;
   }
});

//Ansicht

app.AboutView = Backbone.View.extend({
    tagName: 'div',
    className: 'about',

    template: _.template( $( '#aboutTemplate' ).html()),

    render: function () {
        this.$el.html(this.template());
        return this;
     }
});

});

var router = new app.Router();
Backbone.history.start();

Ich denke, das problem ist im Zusammenhang mit der Home-router, die app.BookListView und der app.EditView, aber ich bin mir nicht sicher.

Jede Hilfe ist willkommen.

Dank.