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

8
votes

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.

3
javascriptember.jshandlebars.js

3 Answers

33
votes

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.

8
votes

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.
4
votes

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 }} ...