[SOLVED] Make a row clickable with ember-bootstrap

Make a row clickable with ember-bootstrap

Here is an example of my hbs code.

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
        <th>#Id</th>
        <th>{{t 'firstname'}}</th>
        <th>{{t 'lastname'}}</th>
        <th>{{t 'email'}}</th>
        <th>{{t 'username'}}</th>
        </thead>
        <tbody>
        {{#each users as |user|}}
            <tr>
                <td>
                    {{#link-to 'profile' user.id}}
                        {{user.id}}
                    {{/link-to}}
                </td>
                <td>
                    {{#link-to 'profile' user.id}}
                        {{user.firstname}}
                    {{/link-to}}
                </td>
                <td>
                    {{#link-to 'profile' user.id}}
                        {{user.lastname}}
                    {{/link-to}}
                </td>
                <td>
                    {{#link-to 'profile' user.id}}
                        {{user.email}}
                    {{/link-to}}
                </td>
                <td>
                    {{#link-to 'profile' user.id}}
                        {{user.username}}
                    {{/link-to}}
                </td>
            </tr>
        {{/each}}
        </tbody>
    </table>
</div>

As you can see, every element of this panel link to the same profil, but I wondered if there is a way to make the whole row clickable, not every element.
That mean that I want to click between each {{user.*}}, not just on them, to send me to a profile. I already searched for that, but I couldn't find an answer for bootstrap and handlebar together.
Thank you for your time!

Solution

U can set the {{link-to}} helper to the row element like the one below.

{{#link-to "profile" user.id tagName = "tr"}}

   <td>
       <a>
         {{user. firstname}}
       </a>
   </td>
   <td>
       <a>
         {{user. email}}
       </a>
   </td>

   ....

{{/link-to}}