Dynamically change size of collection in Backbone.js from HTML Select form - backbone.js

Question

I have this table that has a list of items from an array called books. i.e.
var books = [
{"title": "Harry Potter 1", "author": "J. K. Rowling"},
{"title": "Harry Potter 2", "author": "J. K. Rowling"}
//.... More books
]
I separated my views into a view for a single book row, the entire book list that gets rendered into a table, and also a view for the select form.
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
})
this is in my 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>
Currently my messy code for the select view can make the list collection shrink (so my table goes from 25 entries to 10 for example) but then if i try to make the table display more books i get an error - Uncaught TypeError: Cannot read property 'toJSON' of undefined. I would think using the collection.slice function should help, but I can't figure it out. Also, getting my delete book function to work with this is hard. Can I get any help using the slice method to dynamically change the size of my book array or book collection so the table displays correctly?

Answer 1

When you are modifying the models array directly, you are losing the reference to models, and you would have to re-add the to the collection to show them again.
Instead of changing the actual collection, you should pick those out you need in the render method. This also makes more sense on a conceptual level, since the number of entries to display is a view-concern rather than a data-concern.
Your view will now look something like this:
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);
}
});
Then within updateBookList you can call
this.collection.booksToShow = $('#num-entries').val();
Another thing; for good measures sake, you should remember to unbind the individual BookViews as well when you remove them. Preferably by creating a method in BooksView to clean up.