Clickable table rows in Ember.js

As pointed out in this Github issue, it is quite easy to wrap a make a table row clickable in Ember.js. https://github.com/jonnii  supplied this code snippet which allows you to make a whole row clickable for a {{#linkTo}} destination while still including buttons or links in that row with other targets. Check it out:

{{#linkTo 'contact' contact tagName="tr"}}
<td>{{name}}</td>
<td><button {{action destroy contact bubbles=false}}>Destroy!</button></td>
<td>{{#linkTo 'somewhere else' foo}}something{{/linkTo}}</td>
{{/linkTo}}

view raw
gistfile1.txt
hosted with ❤ by GitHub

According to the guides, the {#action}} helper will propagate the event by default to the parent DOM nodes, so you need to add bubbles=false to the button, if you only want that button action to be executed.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s