如何在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

要回答你的問題：

所有你的行正在使用相同的依賴o所以當一行更改對象時，所有其他行都會響應。

要解決此問題，您可以爲每行創建一個新的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" : ""; 
};