Question

我有一个小应用程序（我的第一个流星应用程序），我想要添加更改的实时内容。所以，我的代码看起来像这样

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

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

P.S。在docs中我发现了observe方法，但是我不太明白如何使用它来改变属性而不是所有的集合。

THX。

Answer 1

来自流星documentation：

默认情况下，新的Meteor应用程序会自动包含保留输入包。这保留了输入，textarea，按钮等所有类型的元素， select，以及具有唯一ID属性或具有名称的选项具有id的封闭元素中唯一的属性属性。要关闭此默认行为，只需删除保留输入包。

因此，一旦您在第一个浏览器中键入textarea，即使content.text由于其他浏览器中的更改而触发更改，文本也不会更改。

您可以通过将把手表达式{{content.text}}放在textarea之外来观察反应性是否正常工作，如下所示：

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

要更新textarea中的文本，您可以执行以下命令删除preserve-inputs包

meteor remove preserve-inputs

改变内容实时 - 流星

1 个答案: