Метеор: Tracker.autorun / Наблюдение Изменения и коллекции не работают должным образом
Я новичок в использовании метеора, поэтому я надеюсь получить очень простое объяснение того, как эти функции работают, и как я должен их использовать. В противном случае, если есть метод, который лучше подходит для того, чего я надеюсь достичь, знания будут оценены.
Функциональность, которую я надеялся достичь:
У меня есть коллекция Mongo, которая содержит числовое значение в документах, назначенных конкретным пользователям.
Я буду использовать значение, полученное из документа, для заполнения width: xx% в некоторых встроенных стилях CSS на «индикаторе прогресса». Но другое использование, которое я использую для этого, - это выполнение некоторой «реактивной» функции, которая запускается всякий раз, когда изменяется это значение, что может динамически обновлять цвет фона этого индикатора выполнения, основываясь на текущем значении индикатора выполнения. Думайте «красный» для низкого и «зеленый» для высокого:
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);
}
});
Чтобы подвести итог вопроса / проблемы:
Я хочу использовать значение из документа dong mongo в некоторых встроенных CSS, а также отслеживать изменения этого значения. Когда значение изменится, я хочу запустить функцию, которая обновит цвет фона 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>