contenteditable和emberjs

Question

我有一個contentEditable視圖，當我focusOut我得到的HTML輸入並保存它。

但是，當我從CONTENTEDITABLE刪除所有文字，然後集中了我的錯誤

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

請參見本文的jsfiddle並刪除VALUE1文本和重點了。

http://jsfiddle.net/rmossuk/Q2kAe/8/

任何人都可以在這方面幫助？

問候 裏克

Answer 1

你EditableView設置顯示器結合到其content.value：

<script type="text/x-handlebars" data-template-name="editable"> 
    {{view.content.value}} 
</script> 

灰燼通過包裝與標誌腳本標記的相關部分進行了綁定更新的法寶。看看所產生的DOM：

現在你讓你的視圖編輯。只要用戶完全刪除視圖的內容，您就會注意到周圍的腳本標記也被刪除（通過瀏覽器）。目前Ember試圖更新顯示器，它不會找到必要的腳本標籤，因此抱怨。

我不認爲你可以使這種方法與contenteditable可靠地工作，因爲你將無法控制瀏覽器保持Ember環境完好無損。我想你需要照顧好自己更新的觀點：取消綁定，創建一個content.value觀察者和明確更新DOM：

App.EditableView = Em.View.extend({ 
    contenteditable: "true", 
    attributeBindings: ["contenteditable"], 

    _observeContent: (function() { 
     this._displayContent(); 
    }).observes('content.value'), 

    didInsertElement: function() { 
     this._displayContent(); 
    }, 
    _displayContent: function() { 
     this.$().html(this.get('content.value')); 
    }, 
    ... 

下面是該解決方案的演示一個的jsfiddle：http://jsfiddle.net/green/BEtzb/2/。

（你當然也可以用它採用了常規的輸入字段，並提供了所有的魔結合的Ember.TextField，如果這就是你所需要的。）