javascript – Meteor：Tracker.autorun / observeChanges&collections无法按预期工作
作者：互联网
我是使用meteor的新手,所以我希望得到一个关于这些功能如何工作的基本解释,以及我应该如何使用它们.否则,如果有一种方法更适合我希望实现的目标,那么我们将不胜感激.
我希望实现的功能：
我有一个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>
解决方法:
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>
流星在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")
}
}
});
标签：javascript,css,mongodb,meteor,meteor-helper 来源： https://codeday.me/bug/20190824/1710929.html