javascript - 当该元素的值更改时，是否会自动重新执行从元素读取值的 Meteor Helper？

Question

我需要先用值填充一组选择元素，如下所示:

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

...但是当另一个相关的 select 元素发生变化时更新它们(用子集替换 jobloc 的初始超集)。

助手根据相关选择元素的值返回一组文档，如下所示(伪代码):

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
    }
  }
});

当模板首次呈现时，“date1Shift1JobLoc1Count”选择元素会填充所有 jobloc；但是，如果选择了 worker ，则应清除“date1Shift1JobLoc1Count”中的选项，然后用适当的子集替换。

问题是，由于 Meteor 发现 helper 依赖于“#worker”选择元素的值，这会自动工作吗？我希望如此……但希望我希望太多。如果我的怀疑是有根据的，我怎样才能让助手重新运行，让模板重新渲染？我是否需要从模板事件处理程序中执行此操作，如下所示:

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

?或者我必须从那里“手动”完成，比如(伪代码):

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
     }
}); 

或者有别的办法吗？

Answer 1

jQuery 元素是非 react 性数据源并且自 helpers取决于它，我相信您最好的选择是将此值包装在 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)
  }
})

您可能想要 _.debounce您的更改事件处理，以便用户不会看到整个 UI 在他键入的每个字母时闪烁和更新。