Series: EmberSchool Samples: Introduction to Routing

The link-to helper

Published on Jun 24, 2016

The link-to helper is one way to give your users easy access to other pages.

There are two versions of the link-to helper: inline and block. The inline is shorter, but the block helper is more flexible.

Code

{{#link-to 'foods'}}
  <button>Go to Foods</button>
{{/link-to}}
{{link-to 'Go to Foods' 'foods'}}

Transcript

So we know how to have two separate routes, but how do we get in between those routes, those two pages? We can’t expect everyone to know all of the routes that we have and just type them up in the bar up here. The answer is the link-to helper. Now just like the if helper, there are two forms, the inline form and the block form. Let’s do the block form first.

So the argument we give to the block form is the name of the route that we want to link to. Then in between the opening and closing tags, we type in what we want this link to look like. So here we’ll just have a word, or a phrase. And there, that’s our link, we hit it, and we go to the foods route. We could also make this a button quite easily. And we can really put anything in here that we want. That’s the beauty of the block helper.

But if all we want to put in here is a phrase, we don’t want anything fancy, then we can just use the regular inline helper. And so the inline helper, it takes two arguments. The first is a string that says what we want it to say in the link. The second is the application path. So we can see that it still says ‘Go To Foods’ and it works just as well. The advantages of this are that it’s shorter. The disadvantages are we have less flexibility. So if we try to put a button in here, well it’s just going to say button because it’s interpreting it directly as a string.

So our about page has a link to the Foods page, and let’s give the Foods page a link to our about page. We’ll go ahead and add it right here. So this will add a nice link right here. Maybe it’s not the best-styled link, but it’s available.

EmberSchool Samples: Introduction to Routing

Subscribe to our mailing list