Ember.js - “无法对由模板引起的不在DOM中的Metamorph执行操作”

Question

我一直遇到Ember.js抛出错误的问题：

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

我发现these two SO问题，这两个问题都涉及直接操作DOM，而我的应用程序并非如此。搜索错误消息还会返回与相同类型的直接DOM操作相关的许多Github问题。

Answer 1

我在Github上this issue发生search与http://jsfiddle.net/niaconis/JSj7W/1/完全无关的错误消息，我感到很茫然。

基本上，错误归结为HTML注释中包含的Handlebars表达式。

在代码中比在单词中说起来可能更容易，所以这里有一个jsFiddle，其中包含许多解释：{{3}}

{{computedProp}}表达式在模板中使用了三个位置：正常情况下，在HTML注释中以及Handlebars块注释中。打开Web检查器并单击“重新计算”按钮以查看生成的错误。

您可以从示例的模板中删除HTML注释，并看到代码在不存在时运行正常。

希望这将引导其他繁荣的Ember开发人员更容易地使用这样一个简单的解决方案。

Answer 2

问题很简单，但跟踪实际原因很难。对于我们使用metamorph跟踪的项目，它会在ID为metamorph-##-start和id metamorph-##-end的脚本元素之间进行换行。在正常情况下，除非不再需要，否则Ember不应将它们移除。有几个原因可以解决这个问题：

• 手动操作DOM。如果手动删除脚本标记，那么它们将无法找到。
• 格式错误的HTML。假设您离开了一个开放的div，那么变形 - ## - end标记将嵌套在与开始标记不同的级别。

Answer 3

另一个原因是当我们使用把手数据时HTML标签中的属性，例如：

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

使用binding element attributes代替普通方法，例如：

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