【发布时间】：2015-06-09 05:05:24
【问题描述】：
我是使用流星的新手，所以我希望收到关于这些功能如何工作以及我应该如何使用它们的非常基本的解释。否则，如果有一种方法更适合我希望实现的目标，我将不胜感激。
我希望实现的功能：
我有一个 Mongo 集合，其中包含分配给特定用户的文档中的数字值。
我将使用从文档中获得的值在“进度条”上的某些 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，它将运行一个函数，让我根据我的文档值更新我的颜色。
我最终得到的代码如下：
项目.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>
【问题讨论】：
-
帮助我理解你为什么要按照你的方式连接它。当您只需要调用一次订阅时，为什么要在自动运行中订阅模板级别（因为您没有将反应变量传递给订阅）？为什么在自动运行中自动运行，例如为什么不从发布中返回 this.ready() 然后调用更改颜色？
标签： javascript css mongodb meteor meteor-helper