Ember subviews table doesn't work Uncaught TypeError: Cannot read property 'nextSibling' of null

Question

When I use table, subviews doesn't work.

For example this works fine

{{#each}}
    {{view App.RowView}}
{{/each}}

But this breaks

<table>
  <tbody>
    {{#each}}
        {{view App.RowView}}
    {{/each}}
  </tbody>
</table>

Error says

Uncaught TypeError: Cannot read property 'nextSibling' of null

EDIT: Here's the link to jsbin http://jsbin.com/nodotize/1/edit when you try to add item, it fails and throws error, but if you copy the text from rowView template and paste it between each it then works http://jsbin.com/nodotize/5/edit

do you mean RowView is not rendering??..but the the way i see it nextSibling error is not related to the RowView rendering...the error may just halting its rendering...i need more code to debug... — thecodejack
i think its a metamorph issue...when you add views or oberservers, ember appends some <script> tags along..Ember is selecting <script> tag from table, and trying to do DOM ops which is not happening...you have your solution in 2nd link anyways...Ember people very soon are removing metamorphs anyways... — thecodejack
Thanks for the insight on what's happening. The thing is that I want to do custom JavaScript effects on row after it's added. Only way I know is via didInsertElement function, for which I need to create child view — Tomas

Dom Christie Dom Christie · Accepted Answer · 2014-04-03T13:28:58

Adding tagName: 'tr' as a property on rowView, and removing the <tr>s from the template should solve the problem: http://jsbin.com/nodotize/6/edit

The default tagName for a view is div, but for table rows, this would result in invalid markup, so Ember must be detecting the context and adjusting this property for the generated view to tr.

If you manually define a view for a table row you’ll need to set the tagName to 'tr'

Ember subviews table doesn't work Uncaught TypeError: Cannot read property 'nextSibling' of null

1 Answers