在 Meteor 中的绑定 Web 表单上从另一个下拉列表更新一个下拉列表

Question

我有一个绑定到现有数据的编辑表单。我有两个下拉菜单，我希望根据特定条件更新它们。例如，我是否将 assignedTo 设置为空白，将状态更改为 UnAssigned，and/or 如果我将状态更改为 UnAssigned，则将 AssignedTo 更改为空白，等等

状态下拉列表：

<select class="form-control edit-status" id="status" name="status">
        <option selected="{{equals status 'UnAssigned'}}" value="UnAssigned">UnAssigned</option>
        <option selected="{{equals status 'Open w Vendor'}}" value="Open w Vendor">Ticket with Vendor</option>
        <option selected="{{equals status 'Not Started'}}" value="Not Started">Not Started</option>
        <option selected="{{equals status 'In Progress'}}" value="In Progress">In Progress</option>
        <option selected="{{equals status 'Reopened'}}" value="Reopened">Reopened</option>
      </select>

分配给下拉列表

<select class="form-control edit-assigned-to" id="assignedTo" name="assignedTo">
        <option value="" selected="{{equals assignedTo ''}}">Select a User</option>
        {{#each users}}
          <option value="{{_id}}" selected="{{equals ../assignedTo _id}}">{{services.auth0.name}}</option>
        {{/each}}
      </select>

我已经对它们中的每一个都有一个相等的帮助器来选择加载表单数据时已经设置的值。我正在考虑将 Reactive Vars 与更改事件一起使用，但我不确定如何准确地实现它，或者我是否走在正确的轨道上。 T

Answer 1

假设包含 status 和 assignedTo 字段的集合称为 myCollection:

Template.myTemplate.events({
  'change #status': function(ev){
    ev.stopPropagation();
    var newStatus = $('#status).val();
    if ( newStatus == "UnAssigned" ){ // unset the assignedTo value
      myCollection.update({ _id: this._id },
        { $set: { status: newStatus}, $unset: { assignedTo: true }});
    } else {
      myCollection.update{ _id: this._id },{ $set: { status: newStatus}});
    }
  },
  'change #assignedTo': function(ev){
    ev.stopPropagation();
    var newAssignedTo = $('#assignedTo').val();
    if ( newAssignedTo != "None" ){
      var userId = Meteor.users.findOne({ _id: newAssignedTo });
      myCollection.update({ _id: this._id },{ $set: { assignedTo: newAssignedTo }});
    } else { // unset the assignedTo
    myCollection.update({ _id: this._id },
      { $set: { status: "UnAssigned" }, $unset { assignedTo: true }});
    }
  }
});

请注意，在您的模板中，您缺少一种方法 select "None" 作为指定用户的值。

Answer 2

我最终在更改事件中使用了一些 jquery。

'change .edit-status': function(event, template){
  var status = event.target.value;
  if (status === "UnAssigned") {
    $(".edit-assigned-to").val("");
  }
  return false;
},

'change .edit-assigned-to': function(event, template){
  var assignedTo = event.target.value;
  if (!template.data.assignedTo && assignedTo !== "") {
    $(".edit-status").val("Not Started");
  }
  if (assignedTo === "") {
    $(".edit-status").val("UnAssigned");
  }    
  return false;
}

我不确定这个解决方案是否有更好的方法或陷阱，但它似乎满足了我的需求。

在 Meteor 中的绑定 Web 表单上从另一个下拉列表更新一个下拉列表

Update one dropdown from another dropdown on a bound web form in Meteor

meteor

meteor-blaze

meteor-helper