流行のアプリケーションで単一のページに複数のタイマーが表示される

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パッケージを参照すると、時間が反応します。