Question

我有一个绑定到现有数据的编辑表单。我有两个下拉列表，我想根据具体标准更新每个下拉列表。例如，我是否将assignedTo设置为空白，将状态更改为UnAssigned，和/或如果我将状态更改为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与变更事件一起使用，但我不确定如何实现这一点，或者我是否在正确的轨道上。 Ť

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

请注意，在您的模板中，您错过了选择"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表单上的另一个下拉列表中更新一个下拉列表

2 个答案: