5

我有一个 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/

有人能帮忙吗 ？

最好的问候瑞克

4

1 回答 1

4

您EditableView设置了一个显示绑定到它的content.value：

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

Ember 通过使用标记脚本标签包装相关部分来执行其绑定更新魔法。查看生成的 DOM：

Ember 显示绑定脚本标签

现在您使视图可编辑。一旦用户完全删除视图的内容，您会注意到周围的脚本标签也被删除（由浏览器）。在 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使用常规输入字段并提供所有绑定魔法的 an，如果这就是您所需要的。）

于 2012-12-08T13:29:42.723 回答