Question

我正在编写一个小型应用程序，显示网站上的实时点击。我将hits显示为一个表，并将每个命令传递给模板助手以确定行的类类。这个想法是，随着时间的推移，命中会改变颜色以表明它们的年龄。

所有内容都正确呈现，但我需要刷新页面才能看到帮助程序返回的类随着时间的推移而发生变化。如何让助手反应性地工作？

我怀疑因为集合对象的数据没有改变，这就是为什么我认为我需要使用Session对象。

路由器：

Router.route('/tracked-data', {
  name: 'tracked.data'
});

控制器：

TrackedDataController = RouteController.extend({

  data: function () {
    return {
      hits: Hits.find({}, {sort: {createdAt: -1}})
    };
  }
});

模板：

{{#each hits}}
  <tr class="{{ getClass this }}">{{> hit}}</tr>
{{/each}}

助手：

Template.trackedData.helpers({
  getClass: function(hit) {
    var oneMinuteAgo = Date.now() - 1*60*1000;
    if (hit.createdAt.getTime() > oneMinuteAgo) {
      return 'success';
    } else {
      return 'error';
    }
  }
});

Answer 1

虽然我不确定它是否正确，但我还是设法让这个工作得到了解决。\ n \ n \ n＆＃39;这样做的方式。我创建了一个每秒调用一次的函数来更新包含当前时间的Session键。然后，在我的帮助器中，我可以为要添加类的每个对象创建一个新的Session键。此会话密钥基于Session.get('currentTime')中的值，因此每秒更新一次。 Session是被动的，因此一旦时间比较条件改变值，模板就会更新。

var updateTime = function () {
  var time = Date.now();
  Session.set('currentTime', time);
  setTimeout(updateTime, 1 * 1000); // 1 second
};
updateTime();


Template.trackedData.helpers({

  getClass: function(hit) {
    var tenMinutesAgo = Session.get('currentTime') - 10*1000,
        sessionName = "class_" + hit._id,
        className;
    className = (hit.createdAt.getTime() > tenMinutesAgo) ? 'success' : 'error';
    Session.set(sessionName, className);
    return Session.get(sessionName);
  }
});

更新

感谢您的评论。我最终得到的解决方案是：

<强>的客户机/ utils.js

// Note that `Session` is only available on the client so this is a client only utility.

Utils = (function(exports) {

  return {

    updateTime: function () {
      // Date.getTime() returns milliseconds
      Session.set('currentTime', Date.now());
      setTimeout(Utils.updateTime, 1 * 1000); // 1 second
    },

    secondsAgo: function(seconds) {
      var milliseconds = seconds * 1000; // ms => s
      return Session.get('currentTime') - milliseconds;
    },
  };

})(this);

Utils.updateTime();

<强>的客户机/模板/击中/ hit_list.js

Template.trackedData.helpers({
  getClass: function() {
    if (this.createdAt.getTime() > Utils.secondsAgo(2)) {
      return 'success';
    } else if (this.createdAt.getTime() > Utils.secondsAgo(4)) {
      return 'warning';
    } else {
      return 'error';
    }
  }
});

如何在不更改收集数据的情况下使Meteor模板帮助器发生反应

1 个答案:

更新