Question

我有许多'多个'选择器，但是为了这个例子，假设我有两个。

<form class="input-field col s10">
  <select multiple id="jans-room21">
    <option value="" disabled selected>Add Names</option>
    {{#each Jans21}}
        <option value= '{{FullName}}' selected = {{formatSelectedNames21 RoomJans}} >{{FullName}}</option>
    {{/each}}
  </select>
</form>

<form class="input-field col s10">
  <select multiple id="jans-room22">
    <option value="" disabled selected>Add Names</option>
    {{#each Jans22}}
      <option value='{{FullName}}' selected = {{formatSelectedNames22 RoomJans}}>{{FullName}}</option>
    {{/each}}
  </select>
</form>

Jans21和Jans22正在从DB返回许多文档。它们将显示该房间的选定名称，或者没有'RoomJans'属性或'RoomJans'等于''的名称。它们将排除在另一个选择器中选择的名称。

Template.jansNameSelect.helpers({ 
  Jans21: function () { 
    return Programs.find({ $and: [{ CampYear: Session.get('GlobalCurrentCampYear') }, { $or: [{ RoomJans: '' }, { RoomJans: { $exists: 0 }}, { RoomJans: { $in: ['21A', '21B'] }}]}]}, { sort: { FullName: 1 }}).fetch();
  },

  Jans22: function () {
    return Programs.find({ $and: [{ CampYear: Session.get('GlobalCurrentCampYear') }, { $or: [{ RoomJans: '' }, { RoomJans: { $exists: 0 }}, { RoomJans: { $in: ['22A', '22B'] }}]}]}, { sort: { FullName: 1 }}).fetch();
  }
});

单击按钮时，将调用方法来更新数据库并存储这些名称。

// ...
$('#room_21_jans_button').on('click', function() {
var roomValue = $('input[name="room_select_21_jans"]:checked').val();
if (roomValue) {
  var selectedValues = [];
  $r21jans.find("option:selected").each(function () {
    selectedValues.push($(this).val());
  });
  selectedValues.splice(0, 1);
  var unselectedValues = [];
  $r21jans.find("option:not(:selected)").each(function () {
    unselectedValues.push($(this).val());
  });
  Meteor.call('roomUpdateSN',
    selectedValues,
    unselectedValues,
    roomValue,
    Session.get('GlobalCurrentCampYear')
  );
//...

我所追求的是当在第一个选择器中选择名称并随后保存到数据库时，第二个选择器将更新其名称列表以删除从第一个选择器中选择的名称。我曾经认为这会被动反应，因为我正在执行数据库操作，这样如果从第一个选择器中选择名称并保存到数据库中，则“Jans22”函数将再次触发。但事实并非如此。但是，它会在刷新时加载正确的名称。有没有办法让这个被反应？

Answer 1

在Meteor模板上使用UI组件框架时，您需要在框架下面的模板发生更改时告诉框架。这是因为框架（在这种情况下具体化）使用模板呈现的<select>作为输入，然后创建一组新的DOM元素以呈现所需的UI外观。如果<option>发生了变化，您需要告诉框架重新运行此过程。

在这种情况下，您需要重新运行

$('select').material_select();

每次都有变化。在我看来，最简单的方法是使用辅助程序本身的延迟函数：

Template.jansNameSelect.helpers({ 
  Jans21: function () { 
    Meteor.defer( function() { $('select#jans-room21').material_select(); } );
    return Programs.find({ $and: [{ CampYear: Session.get('GlobalCurrentCampYear') }, { $or: [{ RoomJans: '' }, { RoomJans: { $exists: 0 }}, { RoomJans: { $in: ['21A', '21B'] }}]}]}, { sort: { FullName: 1 }}).fetch();
  },

  Jans22: function () {
    Meteor.defer( function() { $('select#jans-room22').material_select(); } );
    return Programs.find({ $and: [{ CampYear: Session.get('GlobalCurrentCampYear') }, { $or: [{ RoomJans: '' }, { RoomJans: { $exists: 0 }}, { RoomJans: { $in: ['22A', '22B'] }}]}]}, { sort: { FullName: 1 }}).fetch();
  }
});

我怎么能让这个Meteor代码被动？

1 个答案: