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助手中包含的每个项目都有相同的计时器，而不是不同的倒计时器。我想也许对于我的集合中的每个项目我应该创建一个可以存储在数组中的反应变量。我不知道如何去思考这个问题。任何帮助都非常感谢。

 <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程序包，它会使时间反应。

流星应用中单页上的多个定时器

1 个答案: