Link-to and buttons

1

A bit of a philosophical question about the use of buttons within the {{link-to}} helper. Quite often, I need a button to be a simple link-to. I use a button for consistency with other user actions that have {{action}} helpers.

So, for example, I can do this and it works perfectly:

<button type="button" {{action "save"}}>Save</button>

{{#link-to 'my-route'}} <button type="button">Go elsewhere</button> {{/link-to}}

Handlebars renders this as an anchor tag (<a>) containing the button. However, the HTML5 spec specifically mentions that anchors may not contain interactive content: HTML Standard

Thoughts? Is this an opportunity for a new helper (like {{action}}) that has {{link-to}} functionality?

1 Like
2

In my opinion, using a button element for navigation is not really optimal from a semantics point of view. Iā€™m assuming that the reason you want the {{link-to}} to be a button is so that it is styled the same as your other {{action}} buttons? If thatā€™s the case, I would instead recommend that you use CSS to style the link to look like a button. For example, with the Bootstrap framework you can apply the ā€˜btnā€™ class to anchor tags to make them appear identical to a button.

2 Likes
3

I totally agree. If You want create some link, which look like button use for this CSS. Used button tag as part of page navigation is not semantic approach.

4

{{link-to}} has an optional tagName property that you can set to instruct Ember to render a tag other then the anchor tag. For example, if you want your link-to to be a button you could say {{#link-to 'my-route' tagName='button'}} Go elsewhere{{/link-to}}

http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#toc_supplying-a-tagname

6 Likes
5

@billdami thanks, I agree that it is not semantically correct. From a visual perspective, if I have a ā€œbutton barā€ with a bunch of actions and one of them is just a link, I want the user to see a consistent array of buttons.

@bmac I did not know {{link-to}} supported tagName. Very nice, although since I am using Bootstrap, Iā€™ll probably just use the btn classā€¦