How to expand table row in Ember 1.8?

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)

It looks like you're setting the `tagName` for `PositionDetailsView` to 'tr', so a `` element for the DetailsView would be the expected result. Did you mean to use 'td' instead? — gorner, Aug 26 '14 at 17:09
No, I don't. Please look at the effect demo. I need to move `tr.details.view` just after each parent div. — Mateusz Nowak, Aug 26 '14 at 17:13

score 1 · Accepted Answer · edited May 23 '17 at 12:05

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.

The thing is that I can't use other tag than `tr` inside `tbody`. Ember will default use `div` which is going to break my layout. — Mateusz Nowak, Aug 26 '14 at 18:18
You're right, sorry about that. Would it be possible in your case to remove the existing `tbody`, and make the itemView a `tbody`? [It's possible to have multiple tbody elements in a single table](http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table) (though I presume they can't be nested). — gorner, Aug 26 '14 at 18:23
Yes, indeed. Multiple `tbody` is the solution that I was looking for. Thanks for your time ;). — Mateusz Nowak, Aug 26 '14 at 18:27
No problem! I've updated the answer to reflect these comments. — gorner, Aug 26 '14 at 18:46

How to expand table row in Ember 1.8?

1 Answers1