Javascript 流星：Tracker.autorun/observeChanges&；集合未按预期工作_Javascript_Css_Mongodb_Meteor_Meteor Helper

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

javascript css mongodb meteor

Javascript 流星：Tracker.autorun/observeChanges&；集合未按预期工作,javascript,css,mongodb,meteor,meteor-helper,Javascript,Css,Mongodb,Meteor,Meteor Helper,我对使用meteor还不熟悉，所以我希望能得到一个非常基本的解释，说明这些函数是如何工作的，以及我应该如何使用它们。否则，如果有一种方法更适合我希望实现的目标，那么我会很感激这些知识我希望实现的功能：我有一个Mongo集合，它在分配给特定用户的文档中包含一个数值我将使用从文档中获得的值在“progressbar”上的一些css内嵌样式中填充宽度：xx%。但我对它的另一个用途是执行某种“反应式”功能，该功能在该值更改时运行，可以根据progressbar的当前值动态更新该进度条的背景色。“红

我对使用meteor还不熟悉，所以我希望能得到一个非常基本的解释，说明这些函数是如何工作的，以及我应该如何使用它们。否则，如果有一种方法更适合我希望实现的目标，那么我会很感激这些知识

我希望实现的功能：

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

我将使用从文档中获得的值在“progressbar”上的一些css内嵌样式中填充宽度：xx%。但我对它的另一个用途是执行某种“反应式”功能，该功能在该值更改时运行，可以根据progressbar的当前值动态更新该进度条的背景色。“红色”代表低，“绿色”代表高：

project.html：

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

上述方法有时有效。但它似乎不可靠，目前对我也不起作用。我得到了关于无法读取未定义的属性“CurveValue”的错误。根据我在网上的研究，这意味着我试图在收藏加载之前访问此文档。但我真的找不到一个直接的解决方案，也不知道我应该如何构建它来避免那个错误

下一个问题是观察该值的变化，如果背景颜色发生变化，则运行一个函数来改变背景颜色

以下是我尝试使用的几种类型的自动运行/观察代码：

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

总结一下这个问题：

我想在一些内嵌css中使用mongo db文档中的值，并跟踪该值的更改。当值更改时，我希望运行一个函数来更新div的背景色

更新

使用下面@Ethaan的答案，我能够更正我的收藏数据的订阅/模板使用情况。我做了更多的挖掘，对发布/订阅方法有了更深入的了解，并学会了如何在我的收藏加载后的适当时间正确使用订阅回调来运行Tracker.autorun函数。我能够扩展下面给我的答案，包括一个reactive 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>


项目
{{>标准}
...
{{>内容}
{{{#if Template.subscriptionsReady}
{{value}}
{{else}
0
{{/if}

这意味着我正在尝试在集合已加载

你似乎明白了问题所在，现在让我们来看一些可能的解决方案

流星1.1版

如果您正在使用新的meteor版本1.1（您可以检查运行的meteor--version）

用这个

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

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

首先在

onCreated

函数中使用此选项

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

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

有关文档的更多信息，请参见。现在在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.1上为您的第一个解决方案工作。我的密码出错了。我现在只需要弄清楚如何让问题的第二部分起作用。我已经用我完成的解决方案更新了我原来的帖子。我能够学习并利用你举的例子来完成我的问题。请帮助我理解你为什么用这种方式把它连接起来。当您只需要调用一次订阅时（因为您没有向订阅传递反应变量），为什么要在自动运行中使用模板级别的订阅？为什么要在自动运行中自动运行，例如，为什么不从发布中返回此.ready（），然后调用更改颜色？

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