如何有条件地设置 Meteor.js/Handlebars.js 中 HTML 元素的属性？

Question

下面的代码显示了表格中的一行，以及处理模板的 JavaScript 代码。该代码有效，但它在表中的所有按钮上设置了禁用属性。我只希望它用于按下的一个按钮元素。

问题：在 Meteor.js 中有条件地将正确元素设置为禁用的最佳方法是什么？

在我的 HTML 文件中：

<template name="userRow">
<tr>
    <td>{{ username }}</td>
    <td>
        <select class="newRole">
            {{{optionsSelected globalRoles profile.role }}}
        </select>
    </td>
    <td>
        Disabled: {{disabledAttr}}
        {{#isolate}}
            <button type="button" {{disabledAttr}} class="btn btn-xs btn-primary saveUser">Save</button>
        {{/isolate}}
    </td>
    <td><button type="button" class="btn btn-xs btn-danger deleteUser">Delete</button></td>
</tr>

在我的 .js 文件中：

var newUserRole;
var savedDep = new Deps.Dependency;
var saved;
var disabledDep = new Deps.Dependency;
var disabledAttr = "";

Template.userRow.saved = function () {
    savedDep.depend();
    return saved;
};

Template.userRow.disabledAttr = function () {
    disabledDep.depend();
    return disabledAttr;
};

Template.userRow.events({
    'change .newRole' : function (event) {
        newUserRole = event.target.value;
    },

    'click .saveUser' : function (event) {
        disabledAttr = "disabled";
        disabledDep.changed();
        Meteor.call('updateUser',
            {
                userId: this._id,
                role: newUserRole
            },
            function (error, result) {
                if (error) {
                    saved = "NOT saved, try again!";
                } else {
                    saved = "Saved!";
                    savedDep.changed();
                };
            });
        return false;
    }
});

Answer 1

回答您的问题：

您的所有行都使用相同的 Dependency 对象，因此当一行更改对象时，所有其他行都会响应。

要解决此问题，您可以为每一行创建一个新的 Dependency 对象。

例如：

Template.userRow.created = function () {
  this.disabledDep = new Deps.Dependency;
};

并更新所有代码以使用模板的 disabledDep 而不是“全局”。这应该可以解决您的问题。

但是让我们在这里谈谈你的目标：

看起来您希望在保存时以不同方式呈现您的行，直到它们在服务器端得到确认。

更简洁的方法是利用 Meteor 的 isSimulation 方法。例如：

// Put this in a file that will be loaded on both the client and server
Meteor.methods({
  add_item: function (name) {
    Items.insert({name: name,
                  unconfirmed: this.isSimulation});
  }
});

此示例使用插入，但您可以使用相同的技术进行更新。

现在您收藏中的每个文档都有一个“未确认”字段，您可以使用它来更改视图：

Template.userRow.disabledAttr = function () {
  return this.unconfirmed ? "disabled" : "";
};