tagName and HTML best practices

1

I was curious if I should use the Ember tagName option or simply use HTML? For example, on my navbar I could do:

{{#link-to 'index' tagName = 'li'}}Home{{/link-to}}
{{#link-to 'about' tagName = 'li'}}About{{/link-to}}

or I could do:

<li>{{#link-to 'index'}}Home{{/link-to}}</li>
<li>{{#link-to 'about'}}About{{/link-to}}</li>

Are there pros and cons to each? When should I use which? Thanks!

2

Use the latter if possible. I say that because I think it’s good practice to keep links on a tags. I do, however, use a form of the first one when using Bootstrap, since Ember.js places an active class on the current URL links.

{{#link-to 'index' tagName='li' href=false}}
    {{#link-to 'index'}}Home{{/link-to}}
{{/link-to}}

But notice that I disable the href on the li tag so the a tag is the one that is clicked. (I’m not even sure if having an href property on an li will work in all browsers.)

1 Like
3

Just FYI, as of version 1.0.0 RC3 the {{link-to}} helper will not generate an href=“” attribute if the tagName is not “a”.

https://github.com/emberjs/ember.js/blob/v1.4.0/packages/ember-routing/lib/helpers/link_to.js#L489

1 Like