Meteor 应用程序中单个页面上的多个计时器

Question

我正在尝试在一个模板上显示多个计时器。下面给出了我的模板 onCreated 函数

   Template.viewTeamTermPaper.onCreated(function(){
     let template = Template.instance();
     template.subscribe('getTeamTermPaper');
     template.lastDateSubmit = new ReactiveVar()
     template.timeInterval = new ReactiveVar();
     template.timeLapse = new ReactiveVar()
     template.autorun(function () {
        if (template.lastDateSubmit.get()){
           template.timeInterval.set(setInterval(function() {
           let todayDate = new Date()
           //Session.set("time" , todayDate);
           template.timeLapse.set(getTimeRemaining(template.lastDateSubmit.get()));
        //Session.set("timeLapse" , timeLapse);
   } , 1000));
 }

});

我正在使用名为 lastDate() 的助手显示模板的每个实例。

   Template.viewTeamTermPaper.helpers({
     lastDate(){
     let papers =  TeamTermPaper.find({}).fetch();
     return papers.map(function(paper){
     let obj = {}
     obj.paper = paper;
     Template.instance().lastDateSubmit.set(paper.last_submission_date);
     obj.time = Template.instance().timeLapse.get()
  //arr.push(obj)
     return obj
});

//return arr;

}

});

我有一个计算经过时间的函数。

     function getTimeRemaining (endtime){
        let t = Date.parse(endtime) - new Date();
        let seconds = ("0" + Math.floor((t/1000) % 60)).slice(-2);
        let minutes = ("0" + Math.floor((t/1000/60) % 60)).slice(-2);
        let hours =   ("0" + Math.floor((t/(1000 * 60 * 60)) %   24)).slice(-2);
        let days = Math.floor(t/(1000*60*60*24));

        if (t <= 0){
            //clearInterval(timeInterval);
        }

        return {
            'total' : t,
            'days'  : days,
            'hours' : hours,
            'minutes': minutes,
            'seconds' : seconds
        }

}

这就是我输出模板实例的方式

  <template name="viewTeamTermPaper">
    {{#each lastDate}}
        {{> studentViewTeamPaper}}
    {{/each}}
  </template>

我的问题是 lastDate 助手中包含的每个项目都有相同的计时器，而不是不同的倒计时计时器。我在想，也许我应该为 collection 中的每个项目创建一个可以存储在数组中的反应变量。我不知道如何看待这个思路。非常感谢任何帮助。

 <template name="studentViewTeamPaper">
   <div class="row">
      <div class="col-md-12 card">
          <div class="table-responsive">
            <table class="table table-bordered">

               <thead>
                 <tr>
                  <th class="text-danger">Term Paper Name</th>
                  <th class="text-danger">View</th>
                  <th class="text-danger">Count Down</th>
                </tr>
               </thead>


             <tbody>

               <tr>
                  <td>

                      {{paper_name}}


                  </td>

                  <td>
                      {{last_submission_date}}

                  </td>

                  <td></td>
              </tr>

            </tbody>
          </table>
        </div>


     </div>
   </div>
 </template>

Answer 1

您正试图从父模板而不是单个项目模板来控制所有内容。如果您在较低级别 studentViewTeamPaper 模板中定义倒数计时器，那么您将自动为每个模板获得一个不同的计时器。

另请查看 remcoder:chronos 包，它使时间具有反应性。

Meteor 应用程序中单个页面上的多个计时器

Multiple Timers On A Single Page In A Meteor Application

javascript

meteor

countdown