FREELessons: 24Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.4 Persisting Data With Views

The previous lesson, we built this little application that allows us to add and remove books from a list. However, we built this book list so it was pretty much entirely client-side. If you look back at the code here, you can see that we've just added these books to the collection in the JavaScript. And so even if I do remove a bunch books from the list, whenever I refresh the page, we're back to the 5. However, there's no real reason to do this. We do have a working server backend that we built, so let's go ahead and make our application work with this server backend. It will only be a few simple changes, but it will allow you to see an application with several views working together to actually make changes on the server. So first, on the server here, I'm gonna remove this default book that we added in. And then next, let's remove the books that we added to our collection by default. And then I'm just gonna move this creating the collection down to right here where we actually use our collection. So now if I refresh the page at this point, we have 0 books in the list. And I could go ahead and add a book like this, but whenever we refresh the page it's currently not being stored to the server. Also, we're not fetching from the server when we load the page. So let's start by doing the fetch from the server. There are a couple of different ways you can do this. If you had a bigger web application, most likely what you would want to do is use server size templating to interpret the models of the collection into the collection creation before sending it to the browser. So when we create this collection, which we may not do in our JavaScript file here. We might have a small tag inside out indexed.html file, for example, and what you could do is something like this. Inside books here, when we created the first parameter can take an array of models, right? And so we could use server side templates to put in the models like this, something like models.toJSon. And, of course, it would depend on exactly what server side templating engine you're using. But something like this, so that our models would be put into here and then loaded directly to the browser, so that when they got to the browser here, they would just be object literals inside this literal array. However, since our application is still pretty small, we won't go through the process of setting that up. Let's simply do books.fetch. And as we saw in a previous lesson, this will fetch the models and fill this books collection. Now, we want to wait to render the page until books collection has arrived. So, let's use the promise that is returned from fetch. And in there, actually what we can do is we can create these views. That's fine. But we will not render these views until the books have returned. So then if we save this and come back to the browser, if we refresh the page you can see that everything is still loading up just fine. But if we open the network tab, you can see that we do make a get request to /books to potentially get any books that may be stored. So we're making sure that our list will display whatever is on the server. So the next step is to make sure that when we add a book to our list here, it gets saved to the server. And that's actually very easy to do, right in our add book view. When the Add button is clicked, we call the addBook method. In here, we use this .collection.add. Let's switch that to this .collection.create. Now of course, we are listening for the add event that occurs up in here in our books view, right? When this .collection has an add event, we want to call this .addbook. And there's nothing that we have to worry about changing here, because even though we'd switch this from the add to the create method, the create method will still fire the add event, so everything's good there. So at this point, we should be able to, let's refresh the page, and I'll add a book. And when we click add, this book was saved to the server. So now if I refresh the page, you can see that we still have this book, because it was successfully saved to the server. Now when we click remove, it's removed from our book list. But if I refresh the page, it comes back. Because currently remove does not destroy the method on the server. So we do that remove up here in the book view. When we click on the Remove button, we call remove model. And we have this.model.collection.remove this model. This is actually a kind of wordy way of doing what we wanna do. We can change this to just be this.model.destroy. And that will do both what we had it doing previously, which is removing that model from the collection. And it will also destroy that model on the server so that it no longer exists in out server side array. So let me refresh the page here. And we'll go to the Network tab, just so we can see this come through. And if I click Remove here, you can see that it was removed from the list. And we have our delete request sent to books/1. So now if I refresh the page, we have no books in our list. So let's go ahead and add another book. If I refresh the page, you can see it's still there. I remove it, refresh the page, and you can see that it stays removed. And that's really all there is to it. As you can see, it's very simple to make our view actions persist on the server.

Back to the top