5

私はcontentEditableビューを持っており、focusOutすると、htmlを入力して保存します。

しかし、コンテンツ編集可能からすべてのテキストを削除してからフォーカスアウトすると、エラーが発生します

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

このjsfiddleを参照し、value1テキストを削除してフォーカスアウトしてください。

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

誰かがこれを手伝うことができますか？

よろしくリック

4

1 に答える 1

4

あなたEditableViewはそれにバインドするディスプレイを設定しますcontent.value：

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

Emberは、関連する部分をマーカースクリプトタグでラップすることにより、バインディング更新の魔法を実行します。結果のDOMを見てください。

エンバーディスプレイバインディングスクリプトタグ

次に、ビューを編集可能にします。ユーザーがビューのコンテンツを完全に削除するとすぐに、周囲のスクリプトタグも（ブラウザーによって）削除されることに気付くでしょう。現時点では、Emberは表示を更新しようとしますが、必要なスクリプトタグが見つからないため、文句を言います。

contenteditableEmberの周囲をそのままにしてブラウザを制御することはできないため、このアプローチを確実に機能させることはできないと思います。ビューを自分で更新する必要があると思います。バインディングを削除し、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必要なのがそれだけであれば、通常の入力フィールドを使用し、すべてのバインディングマジックを提供するを使用することもできます。）

于 2012-12-08T13:29:42.723 に答える