HTML에서 Backbone.js 컬렉션의 크기를 동적으로 변경하십시오.

Question

books라는 배열의 항목 목록이있는이 테이블이 있습니다. 즉

var books = [ 
    {"title": "Harry Potter 1", "author": "J. K. Rowling"}, 
    {"title": "Harry Potter 2", "author": "J. K. Rowling"} 
//.... More books 
] 

나는 한 권의 책 행 테이블로 렌더링됩니다 전체 도서 목록, 또한 선택 형태의 뷰에 대한 뷰에 내 의견을 분리.

var Book = Backbone.Model.extend({}); 

var BooksCollection = Backbone.Collection.extend({ 
    model: Book 
}); 
var Books = new BooksCollection(books); 
// 
var SelectView = Backbone.View.extend({ 
    el: ".container", 
    events: { 
     "change #num-entries": "updateBookList" 
    }, 
    initialize: function() { 
     this.render(); 
    }, 
    render: function() { 
     this.collection.models.length = $('#num-entries').val(); 
    }, 
    updateBookList: function() { 
     this.collection.models.length = $('#num-entries').val(); 
     //console.log(this.collections.models.length); 
     booksview.$el.empty(); 
     booksview.unbind(); 
     booksview.render(); 
    } 
}); 
var selectView = new SelectView({ 
    model: Book, 
    collection: Books 
}); 
// 
var BooksView = Backbone.View.extend({ 
    type: "BooksView", 
    el: "#books-table", 
    initialize: function() { 
     //this.collection.models.length = $('#num-entries').val(); 
     this.render(); 

    }, 
    render: function() { 
     this.collection.each(function(book) { 
      var bookView = new BookView({ 
       model: book 
      }); 
      bookView.render(); 
      this.$el.append(bookView.$el); 
     }, this) 
    } 
});    
var BookView = Backbone.View.extend({ 
    type: "BookView", 
    className: 'book', 
    tagName: 'tr', 
    template: _.template($("#books-template").html()), 
    events: { 
     "click .delete": "bookRemove" 
    }, 
    initialize: function() { 
     this.render(); 
    }, 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    }, 
    bookRemove: function(book) { 
     this.remove(); 
     this.model.trigger('destroy', this.model); 
     //Books.remove(book); 
    }, 
}); 

var booksview = new BooksView({ 
    collection: Books 
}) 

이 내 HTML에

<div class="container"> 
    <div class="form-group" id="entries-per-page"> 
     <label>Number of Entries:</label> 
     <select class="form-control" id="num-entries"> 
     <option value="10">Show 10 entries</option> 
     <option value="25" selected>Show 25 entries</option> 
     <option value="50">Show 50 entries</option> 
     <option value="100">Show 100 entries</option> 
     </select> 
    </div> 
    <table class="table table-bordered table-hover"> 
     <thead> 
      <tr class="header-names"> 
      <th class="book-category">Title</th> 
      <th class="book-category">Author</th> 
      <th class="book-category">Meta Data</th> 
      <th class="book-category">Options</th> 
      </tr> 
     </thead> 
     <tbody id="books-table"> 
      <script type="text/template" id="books-template"> 
       <td><%- title %></td> 
       <td><%- author %></td> 
       <td><span class='glyphicon glyphicon-remove delete'></span></td> 
      </script> 
     </tbody> 
    </table> 
</div> 

현재 목록을 수집 수축을 할 수있는 선택보기 내 지저분한 코드가 (나의 표는 예를 들어 10 25 개 항목에서 이동)하지만 난 경우 테이블에 더 많은 책을 표시하려고합니다. 오류가 발생합니다. Uncaught TypeError : 정의되지 않은 'toJSON'속성을 읽을 수 없습니다. 내가 collection.slice 함수를 사용하여 도움이 될 것 같아요,하지만 그것을 알아낼 수 없습니다. 또한 내 도서 삭제 기능을 사용하여이 작업을 수행하는 것은 어렵습니다. 슬라이스 방식을 사용하여 책 배열이나 책 모음의 크기를 동적으로 변경하여 테이블이 올바르게 표시되도록 도움을받을 수 있습니까?

Answer 1

모델 배열을 직접 수정하는 경우 모델에 대한 참조가 손실되므로 다시 표시하려면 컬렉션에 다시 추가해야합니다.

실제 컬렉션을 변경하는 대신 render 메소드에서 필요한 컬렉션을 선택해야합니다. 표시 할 항목의 수가 데이터 관심사가 아닌보기 관심사이기 때문에 개념 수준에서 더 이해하기 쉽습니다.

로보기 이제 다음과 같이 보일 것입니다 :

이

var BooksView = Backbone.View.extend({ 
    type: "BooksView", 
    el: "#books-table", 

    // Define how many books we want to display 
    booksToShow: 25, 

    initialize: function() { 
     this.render(); 
    }, 
    render: function() { 
     _.each(this.collection.slice(0, this.booksToShow), this.renderBook, this); 
    }, 
    renderBook: function(bookModel) { 
     var bookView = new BookView({ 
      model: book 
     }); 
     bookView.render(); 
     this.$el.append(bookView.$el); 
    } 
}); 

그런 updateBookList에서 당신이

this.collection.booksToShow = $('#num-entries').val(); 

또 다른 한가지를 호출 할 수 있습니다; 좋은 조치를 취하기 위해서는 개인을 제거 할 때 개별 BookView의 바인딩 해제를 기억해야합니다. 가급적이면 BooksView에 방법을 만들어 정리할 수 있습니다.