Transcript
  • Meteor

Using Route Options

From the class:  Using Iron Router

I'd like to talk more about route options. So far, we've been passing options to our routes as the final parameter. Here's an object of various options. And we've only so far used the name option, which gives our route a name that we can reference from our link helpers inside of templates. But there's some other options we can use here as well.

The other thing that we've been doing is using this function here to tell the router what to do when we land on this particular URL. So this function provides us a way to write some code or logic that is dependent upon the route. But we don't necessarily need this route function if we don't have any custom logic to render. We can just use custom options. Or we can use options for the route.

So let me show you another way to do this. I'm going to get rid of this function completely and just pass options to this route.

So I'll pass a name so that we can use the route inside of our link helpers. And then another option I can provide is the name of a template. So in this case, I'll provide the blog template. And then I can also provide the name of a layout template.

And so these options here will be enough to tell the router that it should render out this template with this layout. When I save it, the app over on the right should still be working just as it was before.

Another form of providing the route function is to declare a property called action. And then I can put some kind of custom logic inside this action function. So this is very similar-- or exactly the same, actually-- as what we had before with our route function.

And so instead of doing anything here, let me say this is a custom action function. And when I save, keep your eyes trained down on the JavaScript console in the lower right in the browser.

And now notice nothing is getting rendered out to the page. And instead, in the console, it says custom action function. So if I want to render out the template, I can say this dot render blog, and this dot layout layout.

Now sometimes we want to apply an option to all the routes. And to do that, I can say router dot configure. And then I can provide a global router option that is accessible to every one of the routes. And so, for example, if I want to use a default layout for every single route, I can provide that here as a layout template option.

Then, inside of my action function, if I want to look up the value of a particular property, which might be defined on the route, or it might be defined on the global router configuration, I can use a method called lookup option. So I can say this dot lookup option, and then provide the key for the option.

So in this case, it's the layout template. And that'll give me the value. And now, instead of hard-coding this, I can just put the value for the layout template inside there.

Now generally you won't need to use this dot lookup option unless you're writing plug-ins or hooks, but I wanted to show you how it works.

Now in this case, we don't really need an action function, because we're not performing any custom logic. And by default the route will automatically render out the template for the route, along with the layout that's specified, either in the router configuration or on the route itself.

So I'm going to go ahead and just get rid of this action function. And this is enough to tell the router what to do with this particular route.

Next, let's convert this blog new route to use option, since we're not doing anything particularly special inside of this function. And what I'll do is I'll just comment this out so that we can reference it while we're working.

The first option I'll pass is this name. And to start off, we'll give this route a name of blog dot new. Now I'm not going to specify template quite yet, because I'd like to show you how something works.

When I click the new article, notice that the route URL is still correct. But when I click it, I get this error saying that the router can't find a template named blognew, or BlogNew in CamelCase.

What it's doing is it's taking the name of this route, and it's automatically trying to search for a template with a name of the route that's sort of similar. But instead of using this dot syntax like this, it converts it into a class case, or CamelCase, like this. And since there's no template called blognew or BlogNew, it just throws up this error onto the page.

So what we can do is either provide the template name explicitly, or change the name of the route to match the name of our template that we have defined. In this case, we called the template Article New. So let's just change the name of our route.

When we do that and save, the router is now able to find the template that we defined called Article New, and it renders that to the page. Now notice down here, we're getting a warning saying that link to couldn't find a route named blognew.

Now it doesn't throw up an error. It just gives us a warning. And so we need to go to our homepage and change the link too to reference the new name for this route. So I'll change the route name here from blog dot new to article dot new, and save.

Now notice the warning goes away down here. And the new article link is still correct. And also notice that even though we didn't provide a layout explicitly here, it's gridding the layout from the global router configuration. And that's why we get this whole layout up here, and the New Article template down here. So if we wanted to change the layout explicitly for this route, we could provide a layout template option here. And that would override the global configuration.

Next up, let's change this next route. Now once again, in this case we're not doing anything special except for setting a data context for the layout. But it turns out we can provide that as an option as well. So instead of providing a route function here, since we're not doing any custom logic, what I will do is provide some options, like a data function.

And what this data function will do is first we can access it as a property in any of the functions of the route. So I can say this dot data, and that will call this particular function here.

But it also sets the data context for the overall layout. And so that will be accessible to all sub-templates that get rendered into the page.

Now in this case, we also want to render out a template called Article, which is different from the name of the route, which we will name article dot show. And so I've provided that as an option here as well.

And now, if we click on our particular blog article, the page shows up just like it did before. And so since we didn't have any custom logic to use inside of our router action function, we can just go ahead and provide these options, and it works just the same.

In this video, I showed you how we could provide some additional options to our routes. Then I showed you how we can even get rid of the route function altogether, unless we're performing some custom logic.

Then I showed you how we can configure global options using the router dot configure method, and then providing options that will be available in all of our routes. And we looked at how we can look up those options by using the lookup option method. And we saw how routes can automatically try to guess the name of the template based on the name of the route. And finally, we saw how a data option automatically sets the data context for the layout of the page.