4

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

我希望实现的功能：

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

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

项目.html：

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

项目.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，它将运行一个函数，让我根据我的文档值更新我的颜色。

我最终得到的代码如下：

项目.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});
  });

}

项目.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>
4

1 回答 1

6

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

似乎您遇到了问题，现在让我们尝试一些可能的解决方案。

流星版本 1.1

如果您使用的是新的流星版本 1.1（您可以检查 running meteor --version）

用这个。

首先在onCreated功能上使用this。

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")
    }
  }
});
于 2015-04-04T06:44:30.330 回答