Transcript
  • Meteor

Dynamic Paths

From the class:  Using Iron Router

In this video, I'd like to create a couple more routes with you and introduce the idea of dynamic paths, or paths that have variables in them. So far in my application I only have one route for the root path. And I'm rendering out the layout and the blog template.

The blog template has these three links. And what I want to have happen is when I click on one of these links, to go to a new route for the article.

So the article will be identified by this ID, 1, 2, or 3. So I'd like to create one route for all of these but have this part be dynamic, or variable, based on the number from the URL.

So we're in the JavaScript. So let's start by creating another route. I'll use the route method again. But this time, I'm going to create a part of the path that's variable.

And to do that, I can use this special colon symbol and right after that, the name of the property that I want to be able to access inside of my route function. In this case, I'll call it _ID, just like the _ID that you'd have in a Mongo collection. And then as a second parameter, we'll continue using regular simple route functions.

Next, let me show you how you can interrogate this code a little bit better inside of the debugger. So what I'd like to do is when we click on one of those links, we'll go to this route. And then I want this to drop us into the debugger, so that we can play around with the values of the variables.

I'll go ahead and click the first link in the list. And that'll drop me into the debugger. I find putting debugger statements like this in the code to be a really useful way to interrogate things and find out what's happening.

If we look over into the scope variable section of the debugger, you can see what this arc points to. And the property I want to show you is called params. That's where the value of the parameters will go, like this ID, and also where we can get access to the hash frag value and the query object, which I'll show you in a second.

So let's take this parameters object now and go back into our JavaScript code and use it. I'll get rid of the debugger statement and instead type console.dir. And we'll print out this dot param so that we can play around with the parameters object for different various values.

Now over in the browser, I'll switch over to console. And then we'll go ahead and click on Link 1 again.

Let me show you around here again. The variable was defined in my route in this dynamic path like this, using the colon and then the name of the variable, which is _ID.

That variable was populated from the URL. So here you can see the URL has an ID of 1.

And that value of 1 is available in the parameters object, which we're printing out here. And you can see the property of _ID and its value of 1.

Let's add a hash fragment and a query. And I'll do that to Blog Item 2.

So let's say that this has a query string. And we'll just say Q1 equals Value 1. And we'll say Q2 equals Value 2. And let's put a hash frag at the end like this. So you might use this typically to anchor or to store some additional information in the URL.

Now we'll back to the original blog. And I'll refresh. And this time I'll click Link 2. And we'll take a look at the parameters of the property.

Notice the query string up here in the URL and the hash frag value here. And inside of the parameters object, those query key values are put into this special property called query, which is an object of all of the key value pairs.

And the value of the hash frag is put into this property called hash. And so here's the value of hash frag.

The other normal parameters, like the ID 2 here, just go directly onto the parameters object. And we can access them by saying this dot params and then the name of the variable.

So I'll just print out now the value of the ID parameter. And keep your eyes trained in the console. And that will print out now in the console when the app refreshes.

Before we move on, I have changed the routing function to render a layout and this new article template down here, which just prints out article. So it acts more like a regular route. And what I'd like to do next is to create another route that allows us to create new blog articles.

I added a new link at the top of the main blog page that links to this new URL called Blog New. And I'd like to create a new route and a new template that will let us create new articles.

If I scroll down a bit, you can see the Article New template, which is where we want to navigate to when we click this link. So let's create a new route by calling the route function. And we'll create a new one called blog/new. And we'll render out the layout and then render out the article new template.

Now, if I click this New Article link, something unexpected happens. Notice that the URL has in fact changed to blog/new. But it looks like the template that was rendered was this article template, not the article new template. And the reason for that is because the route that's actually run here is this route. Let me explain this concept to you.

When the router is searching for which route to use, it takes the URL. And then it goes through each route sequentially in the order that they were defined. And it tests each route to see whether or not the dynamic path that was defined matches the path that is the current URL. And so it's important to define your routes in the order in which you want them processed.

Now, since we have a route up here called blog/slash and then a variable, this will match before this route matches. And so this route here will never actually get run. And so what we need to do is to take this route and put it up above this one so that this one matches first.

Once I do that and the page refreshes, the correct template gets rendered. And just to make sure, I'll hit the Back button. And we'll click the New Article link once again. It looks like now things are working correctly.

In this video, I showed you how to use dynamic paths and to define multiple routes. I'd like to show you where you can get some additional information.

First, you can head over to the guide for the new Iron router. And if you scroll down through the table of contents, you'll see a section for route parameters. And you can click on that and get a better idea of the other things that you can do with dynamic paths.

Another thing you can do is to go look directly at the source code. Part of the goal on Evented Mind is to get you to be able to go and navigate to source code and understand it, because sometimes documentation can be missing things. And this way, you can always just go to the source and figure out how things work.

In this case, what we're doing is we've gone over to the Iron URL package, which is what allows us to get these dynamic paths. And I've cloned the project. And one of the things you can do is usually look in the test directory. And in this case, there's only one test file. And if you look through that, you can get a sense of the different things that the package can do.

And if you scroll down in this package, about halfway through, you can see some different examples of dynamic paths. So in this case, for example, we can have regular expressions in our dynamic paths or named wildcards or even wildcards that just go on forever without a name, anonymous wildcards. And then there's a bunch of other examples here, like mixed parameters, as well as the simple required parameter that we looked at in this video.