How can i re-render a template embedded in another template - meteor

Question

currently i'm working on a project for monitoring solar power stations. And i have a panel template that embedded in dashboard template.
and panel template has its own subscribe, but it seems not reactive? how can i make the panel template reactive?? Thanks.
<template name="Dashboard">
<div class="container-fluid">
<div class="row">
{{#if Template.subscriptionsReady}}
{{#each station in stations}}
{{> StationPortlet station=station}}
{{/each}}
{{else}}
Loading...
{{/if}}
</div>
</div>
</template>
And for Dashboard.js
Template.Dashboard.helpers({
stations: function() {
return Stations.find();
}
});
Template.Dashboard.onCreated(function () {
this.subscribe('allStations');
});
code for Station Panel template
<template name="StationPortlet">
<div class="col-md-6 col-sm-12">
{{#if Template.subscriptionsReady}}
{{#with portlet}}
<!--<div class="panel panel-b-accent m-t-sm panel-filled panel-c-success">-->
<div class="panel panel-filled panel-c-{{indicator}}">
<div class="panel-heading" style="color:#f6a821">
{{> panelTools }}
<!-- <a style="display:block" href="{{pathFor '/dashboard/:id' id=this.id.toHexString}}">{{Name}}</a> -->
<h4 style="color:#f6a821">{{Name}}</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="panel panel-filled">
<div class="panel-body">
<h2 class="m-b-none">
{{Capacity}} <span class="slight"> KW</span>
</h2>
<div class="small">設置容量</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="panel panel-filled">
<div class="panel-body">
<h2 class="m-b-none" style="color:#f6a821">
{{energyPerKW}} <span class="slight"></span>
</h2>
<div class="small">每 KW 發電度數</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="panel panel-filled">
<div class="panel-body">
<h2 class="m-b-none">
{{EnergyToday}}
<span class="slight"><i class="fa fa-play fa-rotate-270 text-warning"> </i> KWh</span>
</h2>
<div class="small">Energy Today</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="panel panel-filled">
<div class="panel-body">
<h3 class="m-b-none">
{{EnergyLifetime}} <span class="slight"><i class="fa fa-play fa-rotate-270 text-warning"> </i> KWh</span>
</h3>
<div class="small">Energy Lifetime</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="slight m-t-sm"><i class="fa fa-clock-o"> </i> Updated: <span class="c-white">{{update}}</span> </div>
</div>
</div>
{{/with}}
{{else}}
<div class="center-block">
{{>LoadingCircle}}
</div>
{{/if}}
</div>
</template>
and for javascript
portlet: function() {
// var station = new ReactiveVar(Template.currentData().station);
var station = this.station;
var entry = {};
entry.id = station._id;
entry.Name = station.Name;
entry.EnergyToday = 0;
entry.EnergyLifetime = 0;
entry.update = null;
entry.Capacity = 0;
entry.indicator = 'success';
//console.log(station);
var inverters = Inverters.find({ Station: station._id, Enabled: true });
var inverter_indicator = 'success';
inverters.forEach(function(inverter) {
entry.Capacity += inverter.Capacity;
//console.log(inverter);
// get the latest logs for this inverter for today
var inverter_logs = InverterLogs.find({ Station: station._id, Inverter: inverter._id }, { sort: { created_at: -1 }, limit: 1 });
inverter_logs.forEach(function(log) {
entry.EnergyToday += log.EnergyToday.value;
entry.EnergyLifetime += log.EnergyLifetime.value;
entry.update = log.created_at;
//console.log(log);
if (log.Inverter_Status.indicator !== 'success') {
console.log('inverter status !=== success');
if (log.Inverter_Status.indicator === 'warning' && inverter_indicator !== 'danger') {
inverter_indicator = 'warning';
}
if (log.Inverter_Status.indicator === 'danger') {
inverter_indicator = 'danger';
}
}
});
});
entry.indicator = inverter_indicator;
// Compare time if latest logs is more than 20 mins or 45 mins. and if yes, set indicator to warning or danger
var twentyMins = 1000*60*20;
var fourtyfiveMins = 1000*60*45;
var latestUpdateIndicator = 'success';
if ((Date.now()-entry.update) > twentyMins) {
// if the date of lastes log is more than 20 mins earlier, set indicator warning
latestUpdateIndicator = 'warning';
if ((Date.now()-entry.update) > fourtyfiveMins) {
latestUpdateIndicator = 'danger';
}
}
if (latestUpdateIndicator !== 'success') {
if (latestUpdateIndicator === 'warning' && entry.indicator === 'success') {
entry.indicator = 'warning';
} else if (latestUpdateIndicator === 'danger' && (entry.indicator === 'success' || entry.indicator === 'warning')) {
entry.indicator = 'danger';
}
}
// if the date of lastes log is more than 20 mins earlier, set indicator warning
//entry.update = moment(entry.update).format('LLL');
entry.update = moment(entry.update).fromNow();
entry.EnergyToday = entry.EnergyToday.toFixed(2);
entry.energyPerKW = (entry.EnergyToday/entry.Capacity).toFixed(2);
entry.EnergyLifetime = entry.EnergyLifetime.toFixed(2);
//entry.update = moment(update).format('LLL');
return entry;
}
Template.StationPortlet.onCreated(function () {
var station = Template.currentData().station;
var self = this;
var now = moment().toDate();
var today = moment(4, "HH").toDate();
Deps.autorun(function() {
self.subscribe('invertersByStation', station._id);
self.subscribe('inverter_logs_ByStation', station._id, today, now, 100);
});
And i'm trying to find good explaination about Blaze render life cycle, if you have any suggestion, plz let me know :)
Here is Publish.js
Meteor.publish('allStations', function () {
var user = Meteor.users.findOne({_id:this.userId});
var client = Clients.findOne({ name: Roles.getGroupsForUser(user)[0] });
if (Roles.userIsInRole(user, 'super-admin', Roles.GLOBAL_GROUP)) {
return Stations.find();
}
else if (Roles.userIsInRole(user, 'client', client.name)) {
console.log('user is client');
var subscribeStations = client.subscribeStations;
return Stations.find({ _id: {$in: subscribeStations} });
} else {
console.log('user is not defined');
return [];
}
});
Meteor.publish('invertersByStation', function (stationID) {
return Inverters.find({ Station: stationID });
});
Meteor.publish('inverter_logs_ByStation', function (stationID, greaterThan, lessThan, limit) {
return InverterLogs.find({ created_at: {$gte: greaterThan, $lte: lessThan}, Station: stationID}, { sort: {created_at: -1}, limit: limit});
});

Answer 1

Your problem come from your helper portlet witch is reactive but don't refer any data reactive source.
What happend?
Just understand helpers natively wrap a Tracker.autorun, witch allow them to rerun when a reactive data change on their scope.
On your helper portlet, you are doing some operations on locally instanciated object entry. However, nothing on your helper is able to trigger reactive rerun.
You should probably look on WHICH CHANGE you want the helper to be rerun.
Once you know that, just use this data as reactive data source (native as Mongo cursor, or wrapped on ReactiveVar).