I have the following helper, which I think is a bit overworked. What this basically does, is loop through a bunch of SVGs that I have, and if they have corresponding data in the DB, then the fill color of the SVG should change (visual representation of the data).
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')});
}
});
I’m still learning how to use Meteor. Before, I had implemented this with autopublish still installed, so it was attached to a Template.rendered
. But after I moved to using pubs/subs, I found that I couldn’t quite implement it the same way as I had before because:
- There was no way to return a helper from .rendered
- The subscription data isn’t yet ready when the template is rendered anyway. So no data was being displayed.
Here’s my previous implementation:
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});
}
}
});
So now I’ve attached the functionality to the helper, but it feels very wrong and bloated. Is there a better way to achieve the same result without using a helper?