Ember.js - “無法對由模板引起的不在DOM中的Metamorph執行操作”

Question

我一直遇到Ember.js拋出錯誤的問題：

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

我發現了這 兩個 SO問題， 這 兩個問題都涉及直接操作DOM，而我的應用程序並不是這樣。 搜索錯誤消息還會返回與相同類型的直接DOM操作相關的許多Github問題。

Answer 1

直到我在Github上發現這個與錯誤消息完全無關的搜索時，我才感到茫然。

基本上，錯誤歸結為HTML注釋中包含的Handlebars表達式。

在代碼中比在單詞中說起來可能更容易，所以這里有一個jsFiddle有很多解釋： http ： //jsfiddle.net/niaconis/JSj7W/1/

{{computedProp}}表達式在模板中使用了三個位置：正常情況下，在HTML注釋中以及Handlebars塊注釋中。 打開Web檢查器並單擊“重新計算”按鈕以查看生成的錯誤。

您可以從示例的模板中刪除HTML注釋，並看到代碼在不存在時運行正常。

希望這將引導其他開花的Ember開發人員更容易地使用這樣一個簡單的解決方案。

Answer 2

問題很簡單，但追蹤實際原因很難。 對於我們使用metamorph跟蹤的項目，它包含一個id為metamorph-##-start的腳本元素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 }} ...