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

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.

Answer 2

The problem is simple, but tracking the actual cause is hard. For items that we track using metamorph, it wraps beteween a script element with an id of metamorph-##-start and id metamorph-##-end. Under normal circumstances, Ember shouldn't remove them unless they're no longer needed. There're a couple of reasons why this could be removed:

• Manually manipulating the DOM. If you manually remove the script tags, then, well they won't be found.
• Malformed HTML. Let's say you left an open div, then the metamorph-##-end tag will get nested at a different level than the start tag.

Answer 3

Another cause are the attributes in HTML tags when we using handlebars data, for example:

<div data-id="{{ model.id }}" ...

Use binding element attributes instead of normal method, for example:

<div {{ bind-attr data-id=model.id }} ...