Meteor JS - 過労を避けるためのデザインパターン

Question

私は以下のヘルパーを抱えています。これは基本的には、私が持っているSVGの束をループし、DBに対応するデータがあれば、SVGの塗りつぶしの色が変わるはずです（データの視覚的表現）。

Template.patientContentTreatment.helpers({ 

    treatments: function() { 

     var completedTeeth = $('.svg-tooth-completed > .tooth'); // get all the svgs 

     var currentNumber, currentPart; 

     for (var i = 0; i < completedTeeth.length; i++) { 
      // get a related data-id 
      currentNumber = $(completedTeeth[i]).closest('.svg-tooth-completed').data('id'); 

      // get the related data-title 
      currentPart = $(completedTeeth[i]).data('title'); 

      if (Treatments.find({ patient_id: Session.get('currentPatient'), tooth_number: currentNumber, tooth_part: currentPart }).fetch().length) { 
       // loop through each SVG and change the fill color if correspoding data is founf 
       $(completedTeeth[i]).css({'fill': '#54a6f8', 'fillOpacity': .8}); 
      } 
     } 

     return Treatments.find({patient_id: Session.get('currentPatient')}); 
    } 
}); 

私はまだメテオールの使い方を学んでいます。以前は、私はまだautopublishをインストールして実装していたので、Template.renderedに添付されていました。 .rendered

からヘルパーを返す方法はありませんでした

1. ：私はパブ/潜水艦を使用して移動した後ので、しかし、私は私が前に持っていたとして、私はかなりそれを同じように実装することができなかったことがわかりましたテンプレートがとにかくレンダリングされると、サブスクリプションデータはまだ準備されていません。したがって、データは表示されませんでした。私はヘルパーへの機能性を添付しましたので、今

   Template.single_patient_treatment_plan.rendered = function() { 
        /* 
        loop through all teeth 
        find if any of them have any findings or treatments attached to them in the database 
        if so, change the fill color 
        */ 
   
       var completedTeeth = $('.svg-tooth-completed > .tooth'), 
        currentNumber, currentPart; 
   
       Tracker.autorun(function() { 
   
        for (var j = 0; j < completedTeeth.length; j++) { 
         currentNumber = $(completedTeeth[j]).closest('.svg-tooth-completed').data("id"); 
         currentPart = $(completedTeeth[j]).data("title"); 
   
         if (Treatments.find({patient_id: Session.get("current_patient"), tooth_number: currentNumber, tooth_part: currentPart}).fetch().length) { 
          $(completedTeeth[j]).css({"fill": "#54A6F8", fillOpacity: .8}); 
         } 
        } 
       }); 
   

   、それは非常に間違ったと肥大化した感じ：

は、ここに私の以前の実装です。ヘルパーを使用せずに同じ結果を達成するより良い方法はありますか？

Answer 1

私はこれが私のコメントにあると知っていますが、私はもう少し考えてより包括的な答えを出すことにしました。

反応的なデータを気にしない場合は、Meteor methodsを使用してください。

あなたが反応性データが必要な場合、私はあなたのサブスクリプションの問題は、このようにそれをチェックすることによって準備されていないに対処するためにFlow Routerを使用することをお勧めします：

FlowRouter.subsReady("treatments"); 

ます。また、自動実行でReactiveVarsを使用することができます。 Here'sは、reactiveVarsの良いスタートです。私はこれが多くの読書であることを知っていますが、間違いなく助けになります。

だからあなたのレンダリングにあなただけのような何かができます：

this.treatment = new ReactiveVar({}); 

this.autorun(function() { 
    if(FlowRouter.subsReady("treatments")) { 
     // other computations or functions 
     this.treatment.set(Treatments.find...); 
    } 
}); 

をこれは、あなたのtreatment可変リアクタンス作るこのテンプレートのインスタンス内のどこtreatmentにアクセスして、あなたのヘルパーを簡素化することが可能になります。

treatments: function() { 
    return Template.instance().get(); // Reactive computation (see note) 
} 

注：ヘルパーは反応的な計算です。意味反応変数をヘルパーの内部に置くと、それは自動的に並べ替えられます。 Here'sこのテーマに関する優れたリソース。

最新バージョンのMeteorをご使用の場合は、renderedの代わりにonRenderedが推奨されています。 onRendered docs