contenteditable i emberjki

Question

Mam widok contentEditable, który po ustawieniu focusOut otrzymam wpisany html i zapisz go.

Ale kiedy usunąć cały tekst z contentEditable a następnie skupić się na zewnątrz pojawia się błąd

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

Proszę zobaczyć ten jsfiddle i usunąć tekst Value1 i skupić się.

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

Czy ktoś może pomóc?

pozdrawiam Rick

Answer 1

Twoje EditableView konfiguruje wyświetlacz wiązanie do jego content.value:

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

Ember wykonuje swoje wiązanie-aktualizującą magię owijając odpowiednich części z tagami skryptu znacznik. Zapraszamy do obejrzenia powstałej DOM:

Teraz dokonaniu widok edycji. Gdy tylko użytkownik całkowicie usunie zawartość widoku, zauważysz, że otaczające tagi skryptów są również usuwane (przez przeglądarkę). W tej chwili Ember próbuje zaktualizować wyświetlacz, nie znajdzie niezbędnych znaczników skryptu, a tym samym narzeka.

Nie sądzę, aby można było zastosować to podejście niezawodnie z contenteditable, ponieważ nie można kontrolować przeglądarki, pozostawiając nienaruszone otoczenie Ember. Chyba trzeba będzie zadbać o widoku aktualizuje się: usunąć wiązania utwórz content.value obserwatora i aktualizuje DOM wyraźnie:

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')); 
    }, 
    ... 

Oto JSFiddle z demo tego rozwiązania: http://jsfiddle.net/green/BEtzb/2/.

(Można oczywiście użyć Ember.TextField który wykorzystuje pole wprowadzania regularne i dostarcza całą magię wiążącą, jeśli to wszystko, czego potrzebujemy.)