流星應用中的單個頁面上的多個定時器

我試圖在模板上顯示多個定時器。我的模板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>

來源

2017-03-02 James Oshomah

你可以提供模板'studentViewTeamPaper'的代碼嗎？ – jordanwillis

@jordanwillis我添加了代碼。謝謝 –

您試圖從父模板而不是單個項目模板控制所有內容。如果您在較低級別的模板中定義倒數計時器，那麼您將自動爲每個計時器獲取一個不同的計時器。另外看看[remcoder：chronos]（https://atmospherejs.com/remcoder/chronos）包，它使時間反應。 –

您試圖控制從父模板而不是從單個項目模板中的所有內容。如果您在較低級別studentViewTeamPaper模板中定義倒數計時器，那麼您將自動爲每個計時器獲取不同的計時器。

也看看remcoder:chronos包，它使時間反應。

來源

2017-03-06 06:24:21

流星應用中的單個頁面上的多個定時器

回答

相關問題