contenteditableとemberjs

Question

私はcontentOdableビューを持っています。私がfocusOutを入力すると、htmlが入力されて保存されます。

しかし、ときに私はのcontentEditableからすべてのテキストを削除してから、私はこのjsfiddleを参照してVALUE1のテキストを削除して焦点を当ててくださいエラーに

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

を取得して焦点を合わせます。

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を更新します：http://jsfiddle.net/green/BEtzb/2/：

ここ

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である私は、あなたが自分自身を更新ビューの世話をする必要がありますね。それはバグかもしれよう

（あなたはもちろん、通常の入力フィールドを使用し、それはあなたが必要とするすべてだ場合、すべての結合の魔法を提供Ember.TextFieldを使用することができます。）