Expandable table row with EmberJS view - ember.js

Question

I'm new to Ember and trying to learn by following tutorials and documentation I can find on the Net.
I'm trying to wrap my head around custom Ember views and when to use them.
I have test case where I list a number of products in a table. Once you click on a specific product, I would like for a hidden row or div to display right below the currently selected product and potentially make an Ajax call to a web service to retrieve more information about the product. Inside this open div or row I might need to edit the fields etc. Should I be using an Ember view for this? When do you trigger click events for the row etc? In which controller would you handle all of the necessary events and extra product information being returned from the service etc.
I've created a JS fiddle with the basic setup, but none of the click events. Has anyone done something similar that I could have a look at, or would be able to assist?
http://jsfiddle.net/jc79aoap/1/
This is just the basic table structure that lists the products, showing the rows that I would like to be clickable:
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{{#each}}
<tr>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{description}}</td>
</tr>
{{/each}}
</tbody>
</table>
Thanks

Answer 1

Conception
This is a structure problem that I have faced some time ago. I have developed following approach. Let's start with defining some necessary controllers
App.ProductsController = Ember.ArrayController.extend({
itemController: 'product'
});
App.ProductController = Ember.ObjectController.extend({
displayDetails: false,
actions: {
toggleDetails: function() {
this.toggleProperty('displayDetails');
return;
}
}
});
and corresponding view
{{#each}}
<tr {{action 'toggleDetails'}}>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{description}}</td>
</tr>
{{#if displayDetails}}
<tr>
<td colspan="3">details here to {{id}}</td>
</tr>
{{/if}}
{{/each}}
You can of course move logic inside condition to another controller
{{#if displayDetails}}
{{render 'productDetails'}}
{{/if}}
You should get desired effect as you can see there
Pros and cons
You are won't have the state of URL changed after click and you won't get ProductRoute.
You can use still load data asynchronously by using ember data with async relationship between models. I am quite not sure whether is it good to do things this way in MVC framework. With time it's going to be a huge mess, believe me.
Conclusion
I don't know whether is there better approach at the moment but you should think a little bit about your UX schema. Maybe it would be better to render sub results in the sidebar or redirect user to different page?