javascript - Meteor 中的文本复制?

标签 javascript meteor spacebars

我正在尝试制作一个 Meteor 应用程序,允许多人同时编辑文本正文(例如 Google Docs/Drive)。

我认为为了做到这一点,我需要一个模板,它只显示数据库中当前的文本,然后每当修改文本时,它都需要更新数据库中的文本。

我能够在下面的最小复制中从我的完整应用程序中重现相同的问题(设计为由单个用户而不是多个用户使用,因此从使用 Mongo Collection 切换到使用 session 。)

<body>
  {{> hello}}
</body>

<template name="hello">
  <pre contentEditable="true">{{text}}</pre>
</template>

(如果我使用 div 而不是 pre,也会出现完全相同的问题。)

if (Meteor.isClient) {
  Session.setDefault('text', "Edit me!");

  Template.hello.helpers({
    text: function () {
      return Session.get('text');
    }
  });

  Template.hello.events({
    "input pre": function (event) {
      Session.set('text', $(event.target).text());
    }
  });
}

尝试在应用程序中输入一些内容,您很快就会发现错误:每次击键时,它都会获取所有现有文本并将其附加到您键入的内容中(因此,每次击键时,它都会复制所有现有文本)文本)。这是真正奇怪的部分:这种行为并不总是立即开始......事实上,我还没有找到任何特别可靠的方法来重现它。一旦它复制了一次文本,它就会在每次击键时可靠地一次又一次地重复该文本,直到您刷新页面。刷新页面后,有时该错误会在您下一次击键时再次出现,有时可能需要大约 20 次击键才会出现。

我已在 Safari 8(OS X 和 iOS)、Chrome(OS X 和 Windows)和 Firefox(仅限 OS X)上进行了测试,每个浏览器中都会出现此问题。

如果您还无法重现它,请尝试突出显示所有文本,删除它,然后输入。也尝试开始一个新行。我发现这些操作似乎更有可能引发文本重复,但即使这些操作也不一定会引发问题。

我的问题是:

  1. 为什么会出现此错误?
  2. 如何阻止这种情况发生?

如果你想直接看到问题,而不必运行 meteor 服务器(尽管我已经给了你所有的代码......)我把它扔了 here .

最佳答案

这是一个已知问题,详细讨论 here 。我正在使用this solution (来自 Swavek)并且效果很好。

简单地说,当两个人同时操作相同的 DOM 元素时就会出现问题:

  1. meteor ,但具有反应性
  2. 负责管理 contenteditable div 内部的浏览器代码。

解决方案是告诉 Meteor 不要操作 contenteditable div 的内部,而是刷新整个 div。你这样做:

<body>
  {{> hello}}
</body>

<template name="hello">
  {{{getContenteditableDiv}}}  <!-- Beware: triple brackets! -->
</template>

Template.hello.helpers({
  getContenteditableDiv: function() {
    return '<pre contentEditable="true">' + Session.get('text') + '</pre>';
  }
});

关于javascript - Meteor 中的文本复制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29292054/

相关文章:

javascript - 单击按钮时链接到另一个 html 文档

javascript - 出现直到关闭一次的 jQuery 欢迎消息 (Rails 3)

javascript - Vue-Apexcharts 饼图总数不显示

javascript - 使用 Meteor 从 FB-graph 中提取照片

javascript - Meteor - 集合未保存到指定的 Mongo URL

javascript - 单击链接时如何显示特定的 div 并隐藏其他的?

javascript - 如何在 Meteor 中使用#each block 实现最后一项的条件?

meteor - Meteor.js 模板 block 中的“或”条件

javascript - Meteor:如何使用空格键创建包含来自两个集合的数据的树列表?

javascript - Mocha "describe"未定义