Question

无法将双向数据绑定附加到<div contenteditable>标记。 Here is the demo

HTML：

<body>
    <div contenteditable style="height:40px;min-width:40px">{{content}}</div>
</body>

JS：

if (Meteor.isClient) {
    Session.setDefault('content', 'Try to edit me')

    Template.body.helpers({
        content: function () {
            return Session.get('content')
        }
    })

    Template.body.events({
        'keydown div': function (e) {
            setTimeout(function(){ Session.set('content', $(e.target).text()) })
        }
    })
}

github还有一个open issue。

Answer 1

您可以使用＆＃39;输入＆＃39;事件

你的例子的meteorpad fork： http://meteorpad.com/pad/x3JQpGiqpE2FrTfLK/content%20editable

相关问题： contenteditable change events

 Template.body.events({
    'input div': function (e) {
      Session.set('content', $(e.target).text());
    }
  });

但是，一般来说绑定可编辑元素存在问题，您会注意到每个输入事件都会导致文本设置两次。

您可以通过在每次修改后清除可编辑文本来解决此问题：

Template.body.events({
    'input div': function (e) {
      Session.set('content', $(e.target).text());
      $(e.target).text('');
    }
  });

但是现在你有另一个问题，光标跳到了开头。

为了解决这些困境，我使用了这个逻辑：

＆＃34;用户是否对数据模型进行了最近的编辑？＆＃34;

使用用户的最新文本更新数据模型。不要更新文本编辑器。要乐观。
如果更新失败，请将文本编辑器设置为数据模型（还原其编辑，显示一些错误）

＆＃34;用户之外的其他内容是否更改了文本的数据模型？＆＃34;

更新文本编辑器以显示最新文本

Answer 2

或者只使用https://github.com/gwendall/meteor-bindings。它利用反应变量将任何DOM元素绑定到输入。

免责声明：我建造了它。

流星 - 有没有办法让div contenteditable双向数据绑定工作？

2 个答案: