流星：Tracker.autorun / observeChanges 和集合未按预期工作

Question

我是 meteor 的新手，所以我希望收到关于这些功能如何工作以及我应该如何使用它们的非常基本的解释。否则，如果有更适合我希望实现的方法，将不胜感激。

我希望实现的功能：

我有一个 Mongo 集合，其中包含分配给特定用户的文档中的数字值。

我将使用从文档中获取的值来填充宽度：'progressbar' 上某些 css 内联样式中的 xx%。但我对它的另一个用途是执行某种 'reactive' 函数，每当此值更改时运行s 可以根据进度条的当前值动态更新此进度条的背景颜色.认为 'red' 代表低，'green' 代表高：

project.html:

<template name="progressBar">
  <div id="progress-bar" style="width:{{curValue}}; background-color:*dynamicColor*;"></div>
</template>

project.js:

Progress = new Mongo.Collection("progress");

Template.progressBar.helpers({
  curValue: function () {
    return Progress.findOne({user: Meteor.userId()}).curValue;
  }
});

以上有时有效。但它似乎并不可靠，现在对我不起作用。我收到有关无法读取未定义的属性 'curValue' 的错误。根据我在网上的研究，这意味着我试图在集合加载之前访问该文档。但我真的找不到直接的解决方案，也无法全神贯注地思考我应该如何构建它来避免那个错误。

下一个问题是观察该值的变化，并运行设置一个函数来改变背景颜色（如果确实发生变化）。

以下是我尝试编写的 autorun/observe 部分代码类型：

Session.set('currentValue', Progress.findOne({user:Meteor.userId()}).curValue);
Tracker.autorun(function(){
  var currentValue = Session.get('currentValue');
  updateColor(currentValue);
});

var currentValue = Progress.findOne({user:Meteor.userId()}).curValue);
var handle = currentValue.observeChanges({
  changed: function (id, currentValue) {
    updateColor(currentValue);
  }
});

总结question/problem：

我想在一些内联 css 中使用来自 mongo 数据库文档的值，并跟踪该值的变化。当值发生变化时，我想要一个函数运行来更新 div.

的背景颜色

更新

使用下面@Ethaan 的回答，我能够更正 subscription/template 我对收集数据的使用。我做了更多的挖掘，对 publish/subscribe 方法有了更深入的了解，并学习了如何在收集后的适当时间正确使用订阅运行我的 Tracker.autorun 函数的回调已加载。我能够扩展下面给我的答案，包括一个反应性 Tracker.autorun，它将运行一个函数，让我根据我的文档值更新我的颜色。

我最终得到的代码如下：

project.js

if (Meteor.isClient) {

  Progress = new Mongo.Collection("progress");

  Template.content.onCreated(function () {
    var self = this;

    self.autorun(function () {
      self.subscribe("progress", function(){
        Tracker.autorun(function(){
          var query = Progress.findOne({user: Meteor.userId()}).level;
          changeColor(query);
        });
      });
    });
  });

  Template.content.helpers({
    value: function(){
      return Progress.findOne({user: Meteor.userId()}).level;
    }
  });

  function changeColor(value){
    //run some code
  }

}

if (Meteor.isServer) {

  Progress = new Mongo.Collection("progress");

  Meteor.publish("progress", function () {
    return Progress.find({user: this.userId});
  });

}

project.html

<head>
  <title>Project</title>
</head>

<body>
  {{> standard}}
</body>

<template name="standard">
  ...
  {{> content}}
</template>

<template name="content">
  {{#if Template.subscriptionsReady}}
      {{value}}
    {{else}}
       0
   {{/if}}
</template>

Answer 1

that means that I am trying to access this document before the collection has loaded

看来您遇到了问题，现在让我们开始寻找一些可能的解决方案。

流星版本 1.1

如果你使用的是新的流星版本1.1（你可以查看运行meteor --version）

使用这个。

首先在 onCreated 函数上使用这个。

Template.progressBar.onCreated(function () {
  var self = this;

  self.autorun(function () {
    self.subscribe("Progress");
  });
});

在 DOCS 上查看有关 subscriptionReady 的更多信息。现在在 HTML 上这样使用。

<template name="progress">
  {{#if Template.subscriptionsReady}}
      <div id="progress-bar" style="width:{{curValue}}; background-color:*dynamicColor*;"></div>
    {{else}}
       {{> spinner}} <!-- or whatever you have to put on the loading -->
   {{/if}}
</template>

Meteor 1.0.4以下

你可以在路由器上安装类似 waitOn:function(){}

的东西

waitOn:function(){
  Meteor.subscribe("Progress");
}

或因为助手是异步的所以做这样的事情（不推荐）。

Template.progressBar.helpers({
  curValue: function () {
    query = Progress.findOne({user: Meteor.userId()}).curValue;
    if(query != undefined){
      return query;
    }else{
     console.log("collection isn't ready")
    }
  }
});

流星：Tracker.autorun / observeChanges 和集合未按预期工作

Meteor: Tracker.autorun / observeChanges & collections not working as expected

javascript

css

mongodb

meteor

meteor-helper