Meteor - 有没有办法让 div contenteditable 双向数据绑定工作？答案

【问题标题】：Meteor - Is there a way to get div contenteditable two way data binding to work?Meteor - 有没有办法让 div contenteditable 双向数据绑定工作？
【发布时间】：2015-03-13 00:41:54
【问题描述】：

无法将双向数据绑定附加到<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。

【问题讨论】：

试试blur事件，它会在你失去对div的关注后保存内容
@Sindis 可以工作，但最好让它在 keydown 上工作：-\
event.keyCode怎么样，在Session中添加char keyCode即可

标签： javascript html meteor

【解决方案1】：

您可以使用“输入”事件

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('');
    }
  });

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

为了应对这些困境，我使用了这样的逻辑：

“用户是否对数据模型进行了最新的编辑？”

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

“除了用户之外，是否有什么东西改变了文本的数据模型？”

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

【讨论】：

那么您可能还想对输入事件使用下划线的去抖动以获得更好的性能。

【解决方案2】：

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

免责声明：我建造了它。

【讨论】：

要对集合中的特定属性进行数据绑定？
好像代码不再维护了。也有兴趣让它与 mongo 连接一起工作。有其他选择吗？