根据多个下拉值更新文档答案

【问题标题】：Update documents based on multiple dropdown values根据多个下拉值更新文档
【发布时间】：2016-05-29 21:15:32
【问题描述】：

我正在一个流星应用程序中构建一个管理面板，以便能够管理该应用程序的用户。目前，我正在显示所有用户，并为每个用户提供一个下拉菜单以更改其角色。

我需要在最后点击某个确认按钮后更新更改的角色。

我有一个模板，它使用用户名和一个带有用户当前角色的下拉菜单呈现，我的模板类似于：

<div class="ui selection dropdown">
  <input type="hidden" name="role">
  <i class="dropdown icon"></i>
  <div class="default text">{{role}}</div>
  <div class="menu">
    <div class="item" data-value="admin">Admin</div>
    .
    .
    .
    <div class="item" data-value="user">User</div>
  </div>
</div>

这会呈现与我数据库中的用户一样多的用户。我需要更新所有在点击按钮后角色发生变化的用户。

我目前的做法是将用户 ID 插入下拉列表：

<div class="ui selection dropdown" id={{_id}}>

然后我有一个用于下拉更改的事件处理程序并捕获值：

Template.templateName.events({
  "change .ui.selection.dropdown": function(event, template) {
    var id = template.find(".ui.selection.dropdown").id;
    var role = template.find("input[name=role]").value;
    ...
  },

});

现在我想知道是否应该在某些会话密钥中推送这些 id,role 对并在单击 save 按钮后更新用户，或者有更好更有效的替代方案？

【问题讨论】：

标签： javascript meteor meteor-blaze semantic-ui dropdown

【解决方案1】：

除了将它们保存在会话变量中并在模板的destroyed 回调中清除会话变量之外，您还可以向已更改的元素添加一个属性，指示该元素已更改。单击保存按钮时，您可以使用attribute selector 获取该用户更改的所有元素。请参阅下面的代码示例以获取更多参考。

Template.templateName.events({
  "change .ui.selection.dropdown": function(event, template) {
    var target = $(event.target);
    target.attr("data-changed", "data-changed");
  },
  "click #saveButtonId": function(event, template) {
    var changedElements = template.$(".ui.selection.dropdown[data-changed]");
    var changedItems = [];

    for (var i = 0; i < changedElements.length; i++) {
       var changedElement = changedElements[i];
       changedItems.push({ id: changedElement.id, value: changedElement.value });
       // or
       //changedItems.push([changedElement.id, changedElement.value]);

    }
    // here you can call a meteor method like
    // Meteor.call('updateUserRoles', changedItems); //this updateUserRoles will now get only changed items that you can update in your DB.
  }
});

【讨论】：