Emberjs, {{#link-to}} Handlebars break when wrapped around DOM elements - html

Question

I need to create a {{linkTo}} that wraps around an entire table-row, but it does not allow me to use {{linkTo}} if there are any non-ember DOM elements in between {{#linkTo}} and {{/linkTo}}
When I put linkTo directly around {{Name}} , like in the code below, it works
{{#each}}
<tr class="people-list">
<td>
<input type="checkbox" class="toggle">
<label class="category-text">
{{#linkTo 'category' this}}
{{Name}}
{{/linkTo}}
</label>
<img class="table-img" src="images/x.png">
<img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
{{/linkTo}
</td>
</tr>
{{/each}}
but when I try to extend those links to outside of the , like shown below, the linkTo doesn't work at all.
{{#each}}
{{#linkTo 'category' this}}
<tr class="people-list">
<td>
<input type="checkbox" class="toggle">
<label class="category-text">
{{Name}}
</label>
<img class="table-img" src="images/x.png">
<img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
</td>
</tr>
{{/linkTo}
{{/each}}

Answer 1

Instead of using {{#linkTo}}, you can get this result by calling an action which redirects to a different route:
{{#each}}
<tr class="people-list" {{action 'goTo' this}}>
<td>
<input type="checkbox" class="toggle">
<label class="category-text">
{{Name}}
</label>
<img class="table-img" src="images/x.png">
<img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
</td>
</tr>
{{/each}}
And then on your controller:
actions: {
goTo : function(input){
this.transitionToRoute('category', input);
}
}

Answer 2

why don't you use a view with tagName='tr', and in the click event redirect to the route you want ? something like this:
App.LinkToCategory = Ember.View.extend({
classNames: ['people-list'],
tagName: 'tr',
click: function() {
router.transitionTo('category', category)
}
})
and in your template something like this:
{{#view App.LinkToCategory category=this}}
<td>
<input type="checkbox" class="toggle">
<label class="category-text">
{{Name}}
</label>
<img class="table-img" src="images/x.png">
<img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
</td>
{{/view}}
I didn't check if it works, but you got the idea.

Answer 3

The link-to helper accepts a tagName property, so you can make the element that does the linking the tr itself.
{{#each}}
{{#linkTo "category" this tagName="tr" class="people-list" role="link"}}
<td>
<input type="checkbox" class="toggle">
<label class="category-text">
{{Name}}
</label>
<img class="table-img" src="images/x.png">
<img class="table-img" {{action "edit" bubbles=false}} src="images/pencil-grey.png">
</td>
{{/linkTo}
{{/each}}
You may also need to add bubbles=false to your edit button, so that clicking it doesn't follow the link. And because the "link" is not an a element, I've also added the role="link" attribute so it is accessible to screen readers.