FREELessons: 24Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.6 Listening for Collection Events

In a previous lesson, we discussed model events. So now we're back to discuss collection events. You already know about the Events API, which is the same for all of Backbone. So we can skip right to looking at the list of events that collections have. And here's that list right here. The bottom three events of this list are the same as they are for models. A request event occurs whenever the collection will make a request to the server. The sync event occurs when that request returns successfully. And the error event occurs if that request fails. The sort should be obvious. That happens whenever the collection is sorted. The reset event occurs whenever the collection is reset to have zero models. And then the add and remove events occur whenever we add or remove a model from the collection. So let's go ahead and build a really simple application that will display each one of the books in our collection. So before we add anything to the collection let's do Books.on add and let's write a function that will run when we add those books. Let's start by creating a main variable which I'll use jQuery since I have it. And so now in our add event handler we want to add our book to the page whenever it's added. Now, you might wonder how can we figure out which book exactly was added? And the answer to that is that it will be passed in as a parameter to this function. You can see exactly what parameters each event causes if you come to the Backbone documentation and look at the catalog of events. You can see right here we have the add event, which occurs when a model is added to the collection. And the parameters that you will get are the model, the collection, and then the options object. In our case, we're only interested in the model. And so, what we can do here, is let's create a property on this model. We'll just say model.view. And this is just a cheap and quick way to keep track of the model's view. In a real Backbone application, we probably wouldn't do this. Anyway, we will create h3 and we will set the text equal to model.get title, and then we will add in parenthesis after that, model.get author. And then we can say main.append model.view. So now, if we come to the browser, and if we refresh the page, you can see that we have all of our books showing up, because as each one of them is added, the add event handler Is triggered. Now what about when we remove a model? So let's do books.on remove and again just like the add event, the model will be the first parameter into the callback function. And so whenever we remove a model from a collection, what do we want to do? Well, we can do model.view to get that h3 element and then we can just say removed to remove that view from the screen. So if we refresh this page and now let's get a book by doing And now we can say books, which is our collection, dot remove book and there we go, it was removed from the collection and you can see our display updated accordingly. And as you start building web application in Backbone basing them all on events you'll see what I mean when I said in one of the earlier lessons that I like to think as my Backbone apps as being data driven. In this case, our collection is our single source of truth for our web application, and then we have views that simply display what's going on with that data. Whenever we add some data that data is added to the view. Whenever we remove some data, it's removed from the view. The view itself is kind of just an onlooker that reacts to changes in the data. So that is a quick look at collection events.

Back to the top