Магистраль: добавление модели в коллекцию и рендеринг вида

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> 

И код Backbone:

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

];

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

}); 

// Модель

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

// О View

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 внести следующие изменения в initialize Функция:

app.BookListView = Backbone.View.extend({  

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

Вот скрипка с изменениями: http://jsfiddle.net/9R9zU/