contenteditable和emberjs

Question

我有一个contentEditable视图,当我focusOut我得到输入的HTML并保存它.

但是当我从contenteditable中删除所有文本然后集中注意力我得到了错误

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

请看这个jsfiddle并删除value1文本并集中注意力.

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使用常规输入字段并提供所有绑定魔法的 ，如果这就是您所需要的。）