Question

我是使用流星的新手，所以我希望能够获得有关这些功能如何工作以及我应该如何使用它们的非常基本的解释。否则，如果有一种方法更适合我希望实现的目标，那么我们将不胜感激。

我希望实现的功能：

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

我将使用从文档中获取的值来填充宽度：在'progressbar'上的某些css内联样式中使用xx％。但我使用的其他用途是执行某种“反应”功能，该功能在此值发生变化时运行，可以根据进度条的当前值动态更新此进度条的背景颜色。认为“红色”为低，“绿色”为高：

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'。根据我在网上研究的内容，这意味着我在加载集合之前尝试访问此文档。但我真的找不到一个直接的解决方案或围绕我应该如何构建这个来避免这个错误。

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

以下是我试图开展工作的一些类型的自动运行/观察代码：

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函数。我能够扩展下面给出的答案，包括一个反应性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

这意味着我在尝试访问此文档之前集合已加载

好像你遇到了问题，现在让我们来寻找一些可能的解决方案。

Meteor版本1.1

如果您使用的是新的meteor 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>

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＆amp;集合没有按预期工作

1 个答案: