Backbone：將模型添加到Collection並呈現視圖

Question

我正在構建一個簡單的Backbone應用程序，其中主要有一個視圖，其中包含書籍列表（書名+封面圖片）以及另一個視圖，我希望添加新書籍到名單。

當我使用示例數據時，視圖與書籍呈現正常，但是當我嘗試將書籍添加到列表中時，它不起作用，我不知道是哪個問題。

這裏是的jsfiddle http://jsfiddle.net/swayziak/DRCXf/4/和我的代碼：

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> 

與骨幹代碼：

app = {}; 

//樣本數據

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

];

//路由器

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

}); 

//型號

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

//收藏

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

//圖書搜索

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

//書籍的列表視圖

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

//添加書籍查看

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

//關於查看

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

我認爲這個問題與家庭路由器，app.BookListView和app.EditView有關，但我不確定這一點。

歡迎任何幫助。

謝謝。

Answer 1

在這個例子中...爲了簡單起見，定義了一個全局書籍集合。

app.books = new app.BookList(books);

通過你的藏書來EditView中& BookListView在你的路由器：

home: function() { 
    if(!this.bookListView) { 
    this.bookListView = new app.BookListView({collection:app.books}); 
    } 
    else { 
    this.bookListView.render(); 
    } 
}, 
edit: function() { 
    if (!this.editView) 
    this.editView = new app.EditView({collection:app.books}); // your book collection 
    $('.feed').html(this.editView.render().el); 
} 

在你EditView中，你需要作出一些改變你的addBook功能：

app.EditView = Backbone.View.extend({ 
// your other code above 
    addBook:function(e){ 
    e.preventDefault(); 

    var title = this.$el.find("#title").val(); //could use: this.$('#title').val() 
    var image = this.$el.find("#image").val(); 

    // remove quotes to pass variables 
    var bookModel = new app.Book({title:title,image:image}); 

    // this.collection is app.books, your book collection. 
    // this will trigger the add event in your BookListView. 
    this.collection.add(bookModel); 
    }, 

}); 

在您的BookListView中對進行以下更改功能：

app.BookListView = Backbone.View.extend({  

initialize: function() { 
    this.render(); 
    this.listenTo(this.collection, 'add', this.renderBook); 
}, 

這裏是與變化的小提琴：http://jsfiddle.net/9R9zU/