Will a Meteor Helper that reads a value from an element automatically be re-executed when that element's value changes?

Question

I have a need to first populate a set of select elements with values, like so:

<select class="jobLoc" id="date1Shift1JobLoc1" name="date1Shift1JobLoc1">
  {{#each jobLocations}}
    <option value={{jl_jobloc}}>{{jl_jobloc}}</option>
  {{/each}}
</select>

...but then update those (replacing the initial superset of joblocs with a subset) when another, related select element changes.

The helper returns a set of Documents based on the value of the related select element, something like this (pseudocode):

Template.tblScheduler.helpers({
  jobLocations: function() {
    var worker = $('#worker').val;
    if (worker == '') {
        return JobLocations.find(); // return all
    } else {
        return JobLocations.find({ jl_workerid: worker }); // a worker was selected; use it to return a subset
    }
  }
});

When the template is first rendered, the "date1Shift1JobLoc1Count" select element is populated with all joblocs; if a worker is selected, though, the options in "date1Shift1JobLoc1Count" should be cleared out and then replaced with the appropriate subset.

The question is, will this work automatically, due to the fact that Meteor sees that the helper relies on the value of the "#worker" select element? I hope so...but expect that I'm hoping for too much. If my doubts are well-founded, how can I get the helper to re-run, and the template to re-render? Do I need I do it from a template event handler, something like this:

Template.tblScheduler.events({
    "change #worker": function (event) {
      // Is it possible to call the jobLocations helper from here?
   }
}); 

? Or will I have to do it "manually" from there, something like (pseudocode):

Template.tblScheduler.events({
    "change #worker": function (event) {
        var worker = $('#worker').val;
        var arrayOfDocs = Meteor.call('getJobLocsForWorker(worker))');
        // assign the values in arrayOfDocs to the "date1Shift1JobLoc1" select element
     }
}); 

Or is there another way?

Answer 1

jQuery elements being non-reactive data sources and since helpers depend on it I believe your best bet is to wrap this value in a ReactiveVar:

var worker = new ReactiveVar('')

Template.tblScheduler.helpers({
  jobLocations : function() {
    var workerValue = worker.get() //<- Register the dependency
    //Your cursor logic here
  }
})

Template.tblScheduler.events({
  'change #worker' : function() {
    worker.set($('#worker').val)
  }
})

You might want to _.debounce your change event handling so that the user does not see the whole UI blinking and updating at every letter (s)he types.