5.3 Navigating With Links
In this lesson, we'll listen for clicks on our anchor elements so that we can avoid unnecessary page refreshes.
1.Getting Started3 lessons, 13:56
2.Backbone Models7 lessons, 38:03
3.Backbone Collections6 lessons, 17:52
4.Backbone Views4 lessons, 26:08
5.Backbone Routers3 lessons, 11:19
6.Conclusion1 lesson, 01:36
5.3 Navigating With Links
So far, we've created a router that displays our views pretty nicely in two separate routes. However, what we can't do right now is easily navigate between them without directly typing that into the address bar. So, let's do some navigation work. The first thing I want to do is, when we go to that /add route, we have our form, but right now when we click add new book, we don't get redirected back to the other page. So let's go ahead and do that. Let's see, right here, in our add book view, when that button is clicked we add the book. So after that, let's do backbone.history.navigate. And this is how we can navigate between routes. So we'll do backbone to history.navigate and let's go to the add route. And if I just do navigate and pass it in add just like this, it will change the route but it won't actually call the route function in the router. And this is because we may want to do the page setup from within this function here and just change the route. However if I do want to trigger this function from the router I can add the option trigger = true. Alright so I will save that. Let's refresh this page and let's add a title and author. And now when I click Add New Book, nothing happens. And oh, duh, the problem is that we don't to navigate to add, we want to navigate to the root route. Let's reload this page and let's try that again, okay? So I will click Add New Book, and notice what has happened. The route has changed, we are back on the root route and we can see our list here which is correct because the books that we've added are now in the list but notice that our form is still here which is not really what we would have expected. However if you look back at the book router you would see that it does make sense. In both these cases were just appending to the main div instead of replacing its contents. So I'm going to go ahead and a .Empty method call before the append. And this way in both cases, we will clear out the contents of that div, and then append our new book. So let's try this one more time, I'll go to slash add, and let's add one more book. And now when I click Add New Book, you can see the book was added to the list. And the book list has appeared, and the form has disappeared. Okay, lets add a button here to take us directly to the add page. So to do this we're gonna have to actually open up our index.html file. And let's see, right here we have our H1, for our book list. Underneath that, let's add a paragraph here and let's add an anchor tag here and this will take us to /add and we'll say Add Book and we'll close the anchor tag just like that. Okay, now if I refresh this page, you can see we have add book showing up right here and I can click that And it will take us to the form. However, you may have noticed that what actually happened was the page refreshed when I clicked add book. It actually went to the server to get a page, came back, and reran everything. We don't really want this to happen because we don't actually need it to happen. Everything we need to know about this new page that we're going to is currently In the browser. It's just that by default, of course, when you click a link, the link sends a request to the browser. So what we want to do is catch that request and handle it ourselves using the same navigation that we used before, backbone.history.navigate. Now, there are a couple different ways to do this, and it can be a little bit tricky because there's a good chance that there are some links In your web application that you actually will need to make a request for. For example, links to other websites or maybe links to PDF files or images. And those we do want to make a request for. So one way that I like to do this is let's add a class to this anchor. So we'll add a class. And we'll just I guess we can call it nav. That's simple enough, and this is part of our books view template so what we will do is let's listen for a new DOM event here and we're gonna listen for a click on .nav and when that comes through, we will call the handle click method. Okay so now let's add just to the bottom here, we'll add HandleClick. We of course will take this event object which is a jQuery event object. And in here let's do backbone.history.navigate and we will navigate to evt.target which is the anchor element and then we'll say .getattribute and let's get the href attribute. And of course we will pass trigger to true. And of course after that, we will have to prevent the default event from happening. So let's say evt.preventDefault, and this will way the request will not occur. Okay, let's refresh the page. And now, if I click add book, I don't know if you can tell, but the page did not refresh, we were just immediately moved to our add form. So we can add a new book, I'll click add new book, and we're taken back to this form. And if I refresh the page, of course all our books stay here. I can remove a book. Excellent, so now we have a very simple, but fully functioning backbone application that uses all of the different components of backbone together.