linkTo helper basics

1

Hi,

Learning the basics of ember. I am a bit confused by the linkTo helper. Is it compulsory to always use this helper to navigate through my ember app? If I do a normal href tag with a valid route it looks like my application gets refreshed. Also, how can I add a class to the tag via the helper? In the source code I can only see classes for active and disabled state.

Thanks, Michael

2

Hi Michael,

You don’t have to use the linkTo helper, but it is highly recommended - for three main reasons.

Hard coding links into your templates means that if you were to change your route structure, you would have to find every instance of that link in your templates and amend it to match.

If you use the history location API rather than hash, you will have to do some server-side configuration to have your server invoke the entry-point of your ember app (index.html, probably) on every request (but not for assets like images, etc).

Finally, the linkTo helper allows you to pass an object through to the route. So if you have a list of users with links to their individual pages, you can pass the user object through to the user page and Ember won’t have to load that user’s data from the server again (it’s already loaded it once for the users collection).

There are probably more advantages, but that’s all I can think of… To everyone else: if I’m wrong, feel free to correct me.

Edit:

I almost forgot, to add a class to your link, just do:

{{#linkTo "yourroute" yourmodel yourmodel2 class="yourclass"}}Anchor Text{{/linkTo}}
3

Thanks for your reply! My plan is to use the helper but in some cases I might be required to not use it. I am using the history API which is why my application is getting re-loaded each time. It works but it looks like ember is not handling the href tag and letting the backend handle it instead.

How are classes handled with this helper? If I want to style my tag or use the default bootstrap classes I can’t seem to add a class?

4

is there a way to insert dynamic title to a linkTo?

5

I think you should check the API document on this part: Ember.Handlebars.helpers - linkTo, this will answer all your questions mentioned above.

One more thing to notice: {{linkTo}} helper is essentially initialized from a sub-class(called Ember.LinkView) of Ember.View, which means you can treat it like an instance of Ember.View. Maybe you want to know more about Ember.View Class, so you’ll know better to control {{linkTo}} helper.

6

Thanks for the links. I can’t seem to find it mentioning anywhere that you can set classes by typing class=“yourclass”. Maybe I am just missing something. Is it possible to add other tag attributes this way?

On another note, I started a thread about dynamic routes that has now been frozen for some reason: Dynamic username route

How would I be able to use the linkTo helper in this use case where my route is dynamic. If I want to link to /username I can’t as ember will only take defined route names. My route looks now like this “this.resource(‘profile’, { path: ‘/:username’ }, function() {”. I can link to profile.index but that creates “/undefined” in the url.