contenteditable和emberjs

Question

我有一个contentEditable视图，当我focusOut时，我得到输入的html并保存它。

但是，当我从contenteditable中删除所有文本，然后将焦点移出时，我会得到错误

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

请查看此value1并删除jsfiddle文本并将焦点移出。

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

有人能帮上忙吗？

向里克致以最好的问候

Answer 1

您的EditableView设置了与其content.value的显示绑定

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

Ember通过使用标记脚本标记包装相关部分来执行绑定更新魔术。看一下生成的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，它使用常规输入字段并提供所有绑定魔术，如果这是您所需要的。)