Transcript
  • Meteor

Link Helpers

From the class:  Using Iron Router

In this video, I'd like to show you how to use Link Helpers in your templates. To do that, I've added a couple more things to our application. Up at the top, I've created a new collection called Articles where we'll store our dynamic articles. And then down in the server block, I'll go ahead and populate that with three articles.

Then, I created a helper on the blog template to return a cursor of all the articles. What we need to do next is to iterate over all of those items and create a list here that is dynamic instead of being hard coded.

Let's change this unordered list from being hard coded to using in each expression. And what we'll do is we'll iterate over the articles cursor. And for each one, we will render out a list item and then an anchor tag for the particular article.

Now, let me show you a couple of different ways that we can do this. First of all, the data context inside of this block here is going to be the particular article that were on. And so one, thing I could do is to create an anchored tag like this, using h or f attribute. And then, use the ID of the article itself. And then inside for the title here, I could just use the title property of the blog article.

I've brought up the app on the right, so we can take a closer look. And it looks like the links are printing out properly with their respective titles. If we want to make sure, I can right click and inspect the element. And down at the bottom, you can see that the ID for the blog article is getting put into the URL.

Now, this works OK. The only problem is that I have to hard code the URL into the h or f attribute. And so if this route URL changes or the route path changes, I need to go throughout my app and make sure that I update all the URLs. So a slightly better approach is to use a special helper that comes with Iron-Router called pathFor or urlFor.

The first thing I need to be able to do is refer to the route by a name. And I want to be able to give it a custom name. And so I'm going to come over here to this route definition here, and as a second parameter I can pass some options. And one of those options is a name.

So for this route, I'm going to name it article.show. And you can use whatever naming convention you want here. I like to use the dot notation because it's easy to read and scan. Back in the HTML, instead of hard coding this link, what I'll do is use the pathFor helper and then pass the name of the route. In this case, it's article.show.

So I'll single quotes since we're already inside of the double quotes here and then close that expression. So now, by using this pathFor helper and passing the name of the route, we get the same URL that we had before. Except this time, if the root URL changes, we don't have to go all over and change the hard-coded URL. So it will just change for us automatically.

In addition to the name of the route, we can pass a query option. And we'd say query equals and then a string to pass some query string. For example, let's say we have a query string with q equals some search string. When I press Save over on the right, you'll see that the URLs get updated with the query string.

We can do the same thing with a hash frag by providing a hash key. So I'll say hash equals and then the actual value, so we'll just call this hash frag for now. Over on the right, you can see the hash frag that's appended to each of the URLs along with the query string.

One last option you can pass is a data option. So far, the pathFor helper has been automatically using the current data context for this area. And so that current data context is going to be an object, and that object is going to be the current article that we're on in this list. And so that's how we're able to get this ID here.

Now, if we wanted to change that data context for this pathFor, we can provide a data key. And then, the value would be some helper that would return the data object. Another way to do this is to use with helper around this anchor tag here and provide a different data context that way just like you would in your normal templates.

Notice that this URL is a relative path, so it doesn't include the full host and port or the protocol like a full URL would. Well, there's another helper we can use called urlFor that will do exactly that.

All we need to do is to change pathFor to urlFor and press Save. And now, you'll see that this URL changes to a full blown URL not just a relative path. Instead of writing out the anchor tag by hand like this, you can you use another helper that shortens all of this up. It's new in the latest version of Iron-Router. It's the links to helper. And we can use it using block expression syntax like this with the pound symbol.

The name of the helper is linkTo. And we need to explicitly pass it a route by saying route equals and then some route. We can also pass it query just like we could before and a hash fragment value like this.

The great thing about linkTo is that any HTML inside of here or text will go inside of the anchor tag. So we could just print out the title like we were doing before, but we could also put some HTML in here. And it will all get rendered out and the anchor tag will get created for us automatically.

When we press Save, we can make sure that it works over in the browser. I find this to be the most convenient of all the helpers, and I end up using it quite a bit. For the attributes, you can also pass along normal attributes just like class or data.

I find this to be one of the more useful helpers, and I use it all the time. Another trick is that you can pass regular HTML attributes in here. Like if you want to add a custom class, you could do that or any of the other attributes that you would normally apply to an anchor element.

In this video, we took a look at some of the template helpers you can use to render out links. We started off by hard coding them. And then, we looked at pathFor and urlFor. And finally, we looked at how we can use linkTo to shorten up our code quite a bit. We looked at how data context gets interpolation onto the URL to form the actual fully resolved URL like this.