ヘルパー条件のためテンプレートの文書要素がヌル

Question

このMeteorクライアントコードでは、ボタンをクリックするとプログレスバーアニメーションが表示されます。問題は、アニメーションコードがprogress要素を使用しようとしたときに、progress要素がnullであることです。

どのように修正できますか？ THX

Template.registerHelper('session', (value) => { 
    return Session.get(value); 
}) 

Template.footer.events({ 
'click button[data-action=carSearch]': function (e) { 
    e.preventDefault(); 
    clickInfo(); 
} 
}); 


'clickInfo': function() { 
    Session.set('inProgress', true); // makes the element visiable 
    progressBarStart(); // start the animation 
} 

    'progressBarStart': function() { 
     let bar = document.getElementById('bar'); //<-- bar is always null 

     if (bar.value < 70) { 
     setTimeout(lib.progressBarStart(), 1000); controls the speed 
     bar.value += 1; 
     } 
    } 

<template name="nameSearch"> 
    <div id="nameSearch"> 
    <p id="result" data-id={{_id}}> 
     {{{display.result}}} <br> 
     {{#if (session 'inProgress')}} 
     <progress id="bar" value="0" max="70"></progress> 
     {{/if}} 
    </p> 
    </div> 
</template> 

Answer 1

あなたは再レンダリングSession.set('inProgress', true);を呼び出した後、50msのは十分でしょうに時間をレンダリング与える必要があります。

次に、clickInfoとprogressBarStartを正しく宣言する必要があります。

Template.footer.helpers({ 
    isInProgress: function() { 
    return Session.equal('inProgress', true); 
    } 
}); 

そして、あなたのテンプレートでそれを使用します：

function clickInfo() { 
    Session.set('inProgress', true); 
    Meteor.setTimeout(progressBarStart, 50); 
} 

function progressBarStart() { 
    ... 
} 

私もinProgressのステータスを取得するために、専用のヘルパーを使用することをお勧めします

{{#if isInProgress} 
... 
{{/if}} 

Answer 2

あなたはこのようなためにセッション変数を使用してはいけません小さな理由。 Meteor JSは、テンプレートレベル操作で反応変数を使用する機能を提供しています。

Template.instance().inProgress.set(true);を呼び出した後にレンダリングする時間をレンダリングする必要があります。

Template.footer.onCreated(function(){ 
    this.inProgress = new ReactiveVar(false); 
}); 


Template.footer.helpers({ 
    isInProgress: function() { 
    return Template.instance().inProgress.get(); 
    } 
}); 

をそして、あなたのテンプレートでそれを使用します：

私もinProgressのステータスを取得するために、専用のヘルパーを使用することをお勧めします

{{#if isInProgress} 
... 
{{/if}}