contenteditable and emberjs

Question

I have a contentEditable view that when i focusOut i get the html entered and save it.

But when i remove all text from the contenteditable and then focus out i get the error

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

Please see this jsfiddle and delete the value1 text and focus out.

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

Can anyone help with this ?

best regards Rick

Answer 1

Your EditableView sets up a display binding to its content.value:

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

Ember performs its binding-updating magic by wrapping the relevant parts with marker script tags. Have a look at the resulting DOM:

Now you make your view editable. As soon as the user completely deletes the view's contents you will notice that the surrounding script tags are also removed (by the browser). At the moment Ember tries to update the display it won't find the necessary script tags and thus complains.

I don't think that you can make this approach to work reliably with contenteditable, since you won't be able to control the browser leaving the Ember surroundings intact. I guess you will need to take care of the view updating yourself: remove the binding, create a content.value observer and update the DOM explicitly:

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

Here is a JSFiddle with a demo of this solution: http://jsfiddle.net/green/BEtzb/2/.

(You could of course also use an Ember.TextField which uses a regular input field and provides all the binding magic, if that's all you need.)