javascript - 根据多个下拉值更新文档

Question

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

只有在最后点击某个确认按钮后，我才需要更新更改后的 Angular 色。

我有一个使用用户名和包含用户当前 Angular 色的下拉列表呈现的模板，我的模板与此类似:

<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>  

这将呈现与我的数据库中拥有的用户一样多的用户。我需要更新点击按钮后 Angular 色发生更改的所有用户。

我当前的方法是将用户 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 对推送到某个 session key 中，并在单击 save 按钮后更新用户，或者有更好、更有效的方法有替代方案吗？

Answer 1

您可以向已更改的元素添加一个属性，指示该元素已更改，而不是将它们保存在 session 变量中并在模板的 destroyed 回调中清除 session 变量。当点击保存按钮时，您可以使用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.
  }
});