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