Обновите один раскрывающийся список из другого раскрывающегося списка в связанной веб-форме в Meteor.

У меня есть форма редактирования, привязанная к существующим данным. У меня есть два раскрывающихся списка, которые я хотел бы обновить в зависимости от конкретных критериев. Например, устанавливаю ли я для назначенного значение пустое значение, изменяю ли оно состояние на Неназначенное и/или если я изменяю состояние на Неназначенное, изменяю ли поле Назначенное на пустое и т. д.

Выпадающий список статуса:

<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 с событиями изменения, но я не уверен, как именно это реализовать, и даже если я на правильном пути. Т


meteor meteor-blaze meteor-helper
person Eric Barb    schedule 25.01.2016    source источник
comment
Где хранятся status и assignedTo? Они внутри коллекции? Ваш случай настолько прост, что вам, вероятно, даже не понадобится реактивная переменная, если вы можете напрямую коснуться значения этих двух переменных.   -  person Michel Floyd    schedule 26.01.2016
comment
Они есть в коллекции. Хотя я не уверен, что следую.   -  person Eric Barb    schedule 26.01.2016

Ответы (2)


arrow_upward
0
arrow_downward

Допустим, коллекция, содержащая поля 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" в качестве значения для назначенного пользователя.

person Michel Floyd    schedule 26.01.2016
comment
Я понимаю, что вы сейчас говорите. Я действительно хочу изменить значения раскрывающегося списка на передней панели. Дайте пользователю увидеть результат, а затем выберите, отправлять форму или нет. Поэтому, если удалить пользователя из раскрывающегося списка AssignedTo, он увидит, что раскрывающийся список Status изменится, например, на UnAssigned. Затем при отправке поля обновляются. Извините, если я не очень ясно выразился, и спасибо, что нашли время ответить! - person Eric Barb; 26.01.2016

arrow_upward
0
arrow_downward

В итоге я использовал 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;
}

Я не уверен, есть ли лучшие подходы или подводные камни для этого решения, но, похоже, оно отвечает моим потребностям.

person Eric Barb    schedule 27.01.2016