如何重新渲染嵌入另一个模板的模板

Question

目前我正在开展一个监控太阳能发电站的项目。我有一个嵌入仪表板模板的面板模板。 和面板模板有自己的订阅，但似乎没有被动？我怎样才能使面板模板反应？感谢。

<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>

对于Dashboard.js

Template.Dashboard.helpers({
  stations: function() {
    return Stations.find();
  }
});
Template.Dashboard.onCreated(function () {
  this.subscribe('allStations');
});

站面板模板的代码

<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> -->
               <a href="{{pathFor '/dashboard/:id' id=this.id.toHexString}}"><h4 style="color:#f6a821">{{Name}}</h4></a>

          </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>

和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);

});

我试图找到关于Blaze渲染生命周期的好解释，如果你有任何建议，请告诉我：）

这是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

你的问题来自你的帮助者portlet女巫是被动的，但没有提及任何数据反应来源。

发生了什么？

只需理解帮助者本身包装Tracker.autorun，允许他们在反应数据发生变化时重新运行。

在你的帮助器portlet上，你正在对本地实例化的对象条目进行一些操作。但是，助手上的任何内容都无法触发反应性重新运行。

您应该查看 WHICH CHANGE 您希望重新运行帮助程序。

一旦你知道，只需将这些数据用作反应数据源（本机为Mongo游标，或包裹在ReactiveVar上）。