How to expand table row in Ember 1.8? - ember.js

Question

I would like to make my row expanded on click. Similar effect takes place here. The problem is that I am getting tr inside tr when using each on new handlebars 1.8.
{{#each positions itemController='position' itemView='url'}}
<td>{{position}}
{{#if showExpanded}}
{{render 'positionDetails' this}}
{{/if}}
{{/each}}
App.UrlView = Ember.View.extend
tagName: 'tr'
App.PositionDetailsView = Ember.View.extend
tagName: 'tr'
Results:
<tr class="ember-view" id="ember7755">
<td>1</td>
<tr class="position-details-view">
</tr>
How can I make it works?
I've manged to create only expending function
App.PositionDetailsView = Ember.View.extend
tagName: 'tr'
classNames: 'expanded'
didInsertElement: (->
parent = #.$().parent()
#.$().show().detach().insertAfter(parent)

Answer 1

With your existing code, you will always have one tr nested inside the other because the itemView for the each has tagName: 'tr', while the positionDetailsView nested inside of it also has the tagName set to 'tr'.
For the results you want, you need a (non-tr) item view that contains both of the <tr> elements. However because it's a table, the default div element for Ember views won't work. Fortunately we can nest the rows in a tbody, and (more importantly) we can have multiple tbody elements in the same table.
That would lead us to this:
{{#each positions itemController='position' itemView='url'}}
<tr>
<td>{{position}}</td>
</tr>
{{#if showExpanded}}
{{render 'positionDetails' this}}
{{/if}}
{{/each}}
App.UrlView = Ember.View.extend
tagName: 'tbody'
App.PositionDetailsView = Ember.View.extend
tagName: 'tr'
This assumes you want to keep UrlView as the entire section for a single element of positions. If not, you can keep the old UrlView, define a separate view to be the tbody, and wrap the position td above with {{#view 'App.UrlView'}}...{{/view}} instead of tr.
In any event, I would not recommend manually manipulating the DOM when using Ember views, as suggested by your edited question. But that code should no longer be necessary with these changes.