Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:24Length:1.8 hours
Backbone
  • Overview
  • Transcript

3.2 Managing Collection Contents

Since collections are primarily a container for models, let's start by looking at the different ways to add and remove models from a collection. I've loaded up the code we wrote in the previous screencast. So let's go ahead and make a books collection first. So we'll say new Books(); So how can we add models to this collection? Well of course the first way to do this would be to simply create a new book, like this. So let's create a new book. And then we can do books.add and we pass in the book model. And now you can see if we do books.length you can see that our collection has a single book. The other way to use the books.add method is to pass an object literal directly to it. And because we have a model class related to this collection, this collection will actually turn that object literal into a new model instance. So if we just pass an object literal, you can see what is actually returned is an actual book model instance. And now, if we do books.length, you can see that we have two books in our book collection. The add method on our books collection could also take an array of either models or object literals. And it would add each one of the items in the array to the collection. To remove something from the collection it's as simple as doing books.remove and passing that individual model which you presumably have a reference to. So I could say books.removebook and now if we do books.length you can see that we only have one book there. Let's actually do books.pluck and let's just pluck the title from each book in the collection. The only book in our collection is Gulliver's Travels because we removed Sign of the Four. If you want to empty a collection you could do books.reset and that will remove everything from the collection. I'm gonna go ahead and add a few more books to the collection. And now we can just take a look quickly at what is in this collection. If I do books.pluck title once again, and so you can see we have four books here. Now, we can actually use several methods to treat this collection like an array. So I could do books.push to add one to the back. So let's just do something simple and say add to back. We'll just give that the title and now if I pluck you can see that add to back has become the last book in the list. We could also pop, books.pop, to remove one from the back. Returned value here is that add to back object that we just added. And if we pluck the title again, you can see we're back to four. We can do books.unshift, which is add to the front. And you can see that to front is now the first item in the list. And, of course, we can do books.shift, to pull that item off the front, and now we're back to just the original four. We can do books.slice and pass it say one and two, and you can see what we have returned is an array. It's not an actual collection object, but it's an array of just the one object that we get from that slice. Note that this slice method works just the same as an array does, so it starts at Index 1, and goes to just before Index 2. So we only actually get a slice from 1 here. Finally, we can clone a collection using the collection.clone method. And you can see now, if I say books2.pop, for example. And now I can do books.pluck title and I can do books2.pluck title and you can see that these are two separate collections. So, those are a few methods you should find useful as you add and remove models from your collections.

Back to the top