Extensible table row with EmberJS view
I'm new to Ember and try to learn by following tutorials and documentation that I can find on the web.
I'm trying to get my head around Ember custom views and when to use them.
I have a test case where I am listing multiple products in a table. When you click on a specific product, I would like a hidden row or div to display right below the currently selected product and possibly make an Ajax call to a web service for more product information. Inside that open div or line, I may need to edit margins, etc. Should I be using an Ember view for this? When do you trigger click events for a row, etc.? In which controller will you handle all the necessary events and additional product information returned from the service, etc.
I created a JS script with basic setup but none of the click events. Has anyone done something similar that I could take a look at or help out?
http://jsfiddle.net/jc79aoap/1/
This is just a basic table structure that lists the products showing the rows I would like to use for clicks:
<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>
thank
source to share
Concept
This is a structural problem that I ran into a while ago. I have developed the following approach. Let's start by defining some of the required controllers
App.ProductsController = Ember.ArrayController.extend({
itemController: 'product'
});
App.ProductController = Ember.ObjectController.extend({
displayDetails: false,
actions: {
toggleDetails: function() {
this.toggleProperty('displayDetails');
return;
}
}
});
and the corresponding form
{{#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 a condition to another controller
{{#if displayDetails}}
{{render 'productDetails'}}
{{/if}}
You should get the effect you want as you can see there
Pros and cons
You will not have the state of the URL changed after clicking, and you will not get the ProductRoute. You can consume load data asynchronously using ember data with asynchronous model dependency. I'm not at all sure if it's a good idea to do this in MVC. Trust me, over time it will be a huge mess.
Conclusion
I don't know if there is a better approach at the moment, but you should think a little about your UX scheme. Maybe it would be better to display the helper results in the sidebar, or redirect the user to another page?
source to share