CODEWITHSUNDEEP
ember.js
Mateusz Nowak
Mateusz Nowak

Reputation: 4121

How to expand table row in Ember 1.8?

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)

Upvotes: 0

Views: 471

Answers (1)

gorner
gorner

Reputation: 612

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.

Upvotes: 1

Related Questions