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

3.3 Syncing Collections

In a previous lesson, we looked at syncing models between the client and the server, and we saw that the only thing we need to add to the front-end of our application is this urlRoot property to our backbone model. However, often you won't use models alone. Most of the time, in my experience, they're always used as part of a collection. And so when that's the case, you don't actually have to put a urlRoot in your model class. And often I don't. Now if we take the urlRoot our of our book collection here, and let me refresh our example here and let's just create a new Book and then I'll say book.save. You can see that we have a problem, a "url" property or function must be specified. Normally backbone uses that urlRoot property to create a URL property or function, but this time it doesn't have that. So what we can do instead is, down here in our books collection, we can add a URL, and this will be the very same value that we had above as our backbone model's urlRoot. And here's how this works. When you add a model to a collection, that model actually gets a reference to its parent collection. And so once it has that reference, it can actually use the collection's URL. And so if the model class doesn't have its own urlRoot to create its request with, it can actually use its parent collection's URL property. We can see this in action if I refresh the page again here, and I try and create a new Book, and if I do book.save, we get that error that we just saw. However, we have our books collection. So let's say books.add(book). At this point, let me show you that the book itself now has a collection property. And so what we can do is book.save, and now you can see if we go to the Network tab that this request was actually made because this book now has a URL, thanks to its parent collection. Now personally, I've found in my own practice that when I'm using a collection I rarely create a new model by saying something like new Book. Instead I often use the collection's create property. Create is similar to add. You'll remember add, we can pass it an object literal and it will turn that into a model, right? Well, if we do books.create instead, what it does is kind of like both an add and a save on that model. So books.create will create a model with these properties and it will save it to the server. So you can see if I do books.create and we come to the Network tab here, you can see we have a response here coming back from the server telling us that this model that we've just created was successfully saved. Now as far as the server-side code goes, there's not a whole lot to add, because collections don't really have their own manifestation, if you will, on the server side. However, there is one thing that we can add to the server side, and that is for the books.fetch method. As you can see if we go to the Network tab, the books.fetch method currently, well, it does come back with a response but it's our catch-all response. So we need to add a more specific route that will manage that request. So let's come back to our server here and let's just add this at the top. And this is a get request to '/books', and what this will do is return the whole collection. And so in here, let's do Object.keys and get the keys of the books object that we're storing our values in. And then we can say map, and we'll map over each ID, and we can return books[id] to get the individual object there. So this should now return an array of all of the values in our books object. So now we can do res.json and just send that as JSON. All right, so now if I refresh the page and let's do books.fetch, we should get an array with just that one default item in it. If we come to our Network tab and look at the response, you can see what we got back was an array with just that single item in it. Let's go ahead and do books.create and we'll create a new one on the server. There you go, we create a new one on the server, and now if I refresh the page, the server won't refresh, of course. So I can do books.fetch, and now let's do books.pluck to get the titles. And we should see that those two books are being fetched from the server And so the books.fetch method is a very handy way to load models from the server. And that's really all you need to know about syncing collections.

Back to the top