Ember.js - "Cannot perform operations on a Metamorph that is not in the DOM" caused by template

Question

I've been having an issue with Ember.js throwing the error:

Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.

I found these two SO questions, both of which involve direct manipulation of the DOM, which is not the case in my app. Searching for the error message also returns numerous Github issues related to the same type of direct DOM manipulation.

Answer 1

I was at a loss until I happened upon this issue on Github from a search entirely unrelated with the error message.

Basically, the error boils down to a Handlebars expression enclosed within an HTML comment.

It's probably easier said in code than in words, so here's a jsFiddle with lots of explanation baked in: http://jsfiddle.net/niaconis/JSj7W/1/

The {{computedProp}} expression is used three places within the template: as normal, within an HTML comment, and within a Handlebars block comment. Open up the web inspector and click the "Recompute" button to see the error produced.

You can remove the HTML comment from the example's template, and see that the code will run just fine when it is not present.

Hopefully, this will guide other blossoming Ember developers to such a simple solution more readily.