Beware invalid html in your ember.js app

Published on February 16, 2014 by Toran Billups

A few months back I tried to upgrade one of our first ember.js projects from RC7 to 1.0. But after the upgrade I noticed a unique re-render bug when I would switch between 2 different sub-views.

After a few failed attempts I put it on the bottom of my priority list and moved on. But last week I noticed a similar error in our latest ember.js app when we forgot to add a closing div element. I immediately realized that handlebars wasn't playing nice with invalid html.

So I went back to the ember.js RC7 project and started looking through each template until I found this self closing div.

<div style="clear:both;" />

It turns out a self closing div is valid xhtml but not valid html (resulting in the re-render behavior). After I modified the div, the strange re-render bug disappeared.

<div style="clear:both;"></div>

I'm not sure if this invalid html bug is documented anywhere but I felt it was worth a blog post either way.