javascript - 实时更改内容 - meteor

Question

我有一个小应用程序(我的第一个 Meteor 应用程序)，我想在其中添加不断变化的实时内容。所以，我的代码看起来像这样

集合

Content = new Meteor.Collection('content');

客户端

if (Meteor.isClient) {

  Meteor.subscribe('content');

  Template.contentTpl.events({
    'keyup #content': function (e) {
      if (!Content.find({_conId: / some id from session / }).count()) {
        Content.insert({text: e.target.value, _conId: / some id from session / });
      } else {
        Content.update({_conId: / some id from session / }, {text: e.target.value});
      } 
    }
  });

  Template.contentTpl.content = function () {
    return Content.findOne({});
  };
}

<template name="contentTpl">
  <textarea id="content" rows="10" cols="100">{{content.text}}</textarea>
</template>

和服务器

if (Meteor.isServer) {
  Meteor.publish('content', function () {
    return Content.find();
  });
}

但是当我在两个不同的浏览器中打开这个应用程序时，我看到以下内容，当我在第一个浏览器中输入时 - 内容在另一个浏览器中发生变化，但是当我在第一个浏览器中输入另一个浏览器时，什么也没有发生。如何在 meteor 中添加实时变化？我应该使用像 socket.io 这样的东西吗？

附:在文档中我找到了观察方法，但我不太明白如何使用它来更改属性而不是所有集合。

谢谢。

Answer 1

来自 meteor documentation :

By default, new Meteor apps automatically include the preserve-inputs package. This preserves all elements of type input, textarea, button, select, and option that have unique id attributes or that have name attributes that are unique within an enclosing element with an id attribute. To turn off this default behavior, simply remove the preserve-inputs package.

因此，一旦您在第一个浏览器中的文本区域中输入内容，即使 content.text 由于另一个浏览器中的更改而发生更改，文本也不会更改。

通过将 Handlebars 表达式 {{content.text}} 放在文本区域之外，您可能会发现 react 性正常工作，如下所示:

<template name="contentTpl">
  <textarea id="content" rows="10" cols="100">{{content.text}}</textarea>
  <p>
  {{content.text}}
</template>

要更新文本区域中的文本，您可以通过执行以下命令删除 preserve-inputs 包:

meteor remove preserve-inputs