主干：添加一个模型来收集和呈现视图 [英] Backbone: Adding a model to Collection and render a View

问题描述

我建立一个简单的应用骨干，我主要有书籍列表（书籍名称+封面图片），并在那里我想新书添加到列表中的其他视图的视图。

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.

当我用本本的观点正确呈现一个采样数据，但当我尝试书籍添加到列表中它不工作，我不知道这是问题。

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.

下面是的jsfiddle http://jsfiddle.net/swayziak/DRCXf/4/我的code：

Here is the JSFiddle http://jsfiddle.net/swayziak/DRCXf/4/ and my code:

HTML：
   

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>

和骨干code：

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

//的图书清单

// List of Books View

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

//添加书籍查看

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

//关于查看

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有关，但我不知道这一点。

I think the problem is related with the Home router, the app.BookListView and the app.EditView, but I'm not sure of that.

任何帮助表示欢迎。

感谢。

推荐答案

在此example..for简便起见，定义一个全局藏书。

In this example..for simplicity's sake, define a global books collection.

app.books =新app.BookList（书籍）;

通过你的藏书来EditView中＆安培; BookListView在你的路由器：

Pass your books collection to editView & BookListView in your router:

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 功能：

In you editView you need to make a few changes to your addBook function:

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 进行以下更改初始化功能：

In your BookListView make the following changes to the initialize function:

app.BookListView = Backbone.View.extend({    

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

下面是变化的小提琴： http://jsfiddle.net/9R9zU/

Here is a fiddle with the changes: http://jsfiddle.net/9R9zU/

这篇关于主干：添加一个模型来收集和呈现视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！