我一直遇到 Ember.js 抛出错误的问题:
Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.
我发现了这 两个SO 问题,这两个问题都涉及对 DOM 的直接操作,而在我的应用程序中并非如此。搜索错误消息还会返回许多与相同类型的直接 DOM 操作相关的 Github 问题。
我一直不知所措,直到我在 Github 上通过与错误消息完全无关的搜索发现了这个问题。
基本上,错误归结为包含在 HTML 注释中的 Handlebars 表达式。
用代码说起来可能比用语言更容易,所以这里有一个 jsFiddle,里面有很多解释:http: //jsfiddle.net/niaconis/JSj7W/1/
该{{computedProp}}
表达式在模板中的三个位置使用:正常情况下,在 HTML 注释中,以及在 Handlebars 块注释中。打开网络检查器并单击“重新计算”按钮以查看产生的错误。
您可以从示例的模板中删除 HTML 注释,并查看代码在不存在时是否可以正常运行。
希望这将引导其他蓬勃发展的 Ember 开发人员更容易地使用这种简单的解决方案。
问题很简单,但追踪真正的原因却很困难。对于我们使用 metamorph 跟踪的项目,它在 idmetamorph-##-start
和 id的脚本元素之间包装metamorph-##-end
。在正常情况下,除非不再需要它们,否则 Ember 不应删除它们。有几个原因可以删除它:
另一个原因是当我们使用车把数据时 HTML 标签中的属性,例如:
<div data-id="{{ model.id }}" ...
使用binding element attributes
代替普通方法,例如:
<div {{ bind-attr data-id=model.id }} ...