Ember.js - "Cannot perform operations on metamorphos that are not in the DOM" caused by the pattern

Question

I am having a problem with Ember.js throwing an error:

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

I found these two questions , both of which are related to direct manipulation of the DOM, which is not in my application. Finding the error message also returns numerous Github problems related to the same type of direct DOM manipulation.

Answer 1

I was at a loss until I ran into this problem on Github from search which was completely unrelated to the error message.

Basically, the error boils down to the Handlebars expression enclosed in the HTML comment.

This is probably easier said in code than in words, so here is jsFiddle with a lot of explanations baked in: http://jsfiddle.net/niaconis/JSj7W/1/

The {{computedProp}} expression uses three places inside the template: as usual, in the HTML comment and in the comment for the Handlebars block. Open the web inspector and click the "Recompute" button to see the error that occurred.

You can remove the HTML comment from the sample template and see that the code will work fine if not.

We hope this helps other Ember developers for a simpler solution with such a simple solution.

Answer 2

The problem is simple, but tracking the actual cause is difficult. For the elements that we are tracking using metamorphos, it wraps around the script element with the identifier metamorph-##-start and id metamorph-##-end . Under normal circumstances, Amber should not remove them if they are no longer needed. There are several reasons why this can be removed:

• Manually manipulate the DOM. If you manually remove the script tags, then they will not be found.
• Formatted HTML. Say you left an open div, then the metamorph tag - ## - will be nested to a different level than the start tag.

Answer 3

Another reason is the attributes in the HTML tags when using steering data, for example:

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

Use binding element attributes instead of the usual method, for example:

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