1

Meteor 承诺响应式更新，以便在数据更改时自动更新视图。包含的排行榜示例演示了这一点。当我测试它时它运行良好：数据在不同浏览器中的多个浏览器选项卡中更新，正如预期的那样。

一切就绪，我开始使用流星进行编码，并且正在取得进展，但是当我测试跨浏览器标签的反应性更新时，我注意到仅在片刻之后跨标签的更新才停止。

基于一个新的空流星项目，我将问题归结为以下代码：

updatebug.html

<head>
  <title>updatebug</title>
</head>

<body>
  {{> form}}
</body>

<template name="form">
  <form onsubmit="return false;">
  {{#each items}}
    {{> form_item }}
  {{/each}}
  </form>
</template>

<template name="form_item">
  <div>
    <label>{{name}}
      <input type="text" name="{{name}}" value="{{value}}">
    </label>
  </div>
</template>

更新bug.js：

Items = new Meteor.Collection("items");

if (Meteor.is_client) {
  Template.form.items = function () {
    return Items.find();
  };

  Template.form_item.events = {
    'blur input': function(e) {
      var newValue = $(e.target).val();
      console.log('update', this.name, this.value, newValue);
      Items.update({_id: this._id}, {$set: {value: newValue}});
    },
  };
}

if (Meteor.is_server) {
  Meteor.startup(function () {
    if (Items.find().count() === 0) {
      Items.insert({name: 'item1', value: 'something'});
    }
  });
}

在多个浏览器选项卡中运行，开始在一个选项卡中更改输入的值。其他选项卡将反映更改。转到下一个选项卡并更改值。重复几次。

一段时间后，任何其他选项卡都不再收到更新。似乎一旦选项卡更改了值，它就不再接收/显示任何更新。

与排行榜示例相比的差异（因为它非常相似）：

  • 排行榜不使用表单控件
  • 排行榜示例在更新时执行增量操作，而不是集合

我即将提交一个错误报告，但我想确保我没有在这里做任何愚蠢的事情，或者错过了 Meteor Collection 机制的重要部分（是的，安装了 autopublish 包）。

4

1 回答 1

2

这里的问题是输入元素的保存。Meteor 将在模板重绘中保留任何具有idor属性的表单字段的输入状态。name重绘将保留表单元素中的旧文本，因为您不想打断其他用户在同一字段中键入内容。如果您name从文本框中删除该属性，每个选项卡都会在模糊时更新。

实际上，我不确定为什么第一个更新在您的示例中有效。这可能实际上是错误！

通过在每个浏览器中打开控制台，您可以看到这不是数据问题。在每个模糊事件中，您将在每个打开的选项卡中获得更新的文档。（类型Items.find().fetch()）

于 2012-04-15T22:28:36.433 回答