动态创建的 DOM 令牌上的 KnockoutJS Click 绑定

Question

我所说的“令牌”是指以下其中之一：

我想将点击事件绑定到每个角色旁边显示的白色十字图标。角色只是一个具有Name 属性的实体（JS 对象）。

要从角色到令牌，我有以下功能：

var closeIcon = '&nbsp;<i class="fa fa-times-circle" aria-hidden="true" data-bind="click: removeRoleForSelectedUser(role)" id="remove-role-btn"></i>';
self.createRoleToken = function(roleName) {
  return roleName + ' ' + closeIcon;
};

循环发生在这里：

<div class="roles-wrapper" data-bind="foreach: $root.selectedUser().roles()">
  <div class="role-token" data-bind="html: $root.createRoleToken(name())"></div>
</div>

即使我的 HTML 标记上有 data-bind="click: removeRoleForSelectedUser(role)"，它仍然不会触发事件，所以我猜它没有被绑定。

我去谷歌寻求答案，saw this。所以我尝试在我的角色令牌上进行绑定（针对 id 属性）。我对用户选择进行了绑定，如下所示：

self.setCurrentUser = function (user) {
  const newRolesArray = self.roles().filter(function (role) {
    return !contains(user.roles(), role);
  });
  self.userAvailableRoles(newRolesArray);
  self.selectedUser(user);
  ko.applyBindings(self, document.getElementById("remove-role-btn"));
}

那没用。它抛出了以下错误：

我错过了什么？

Answer 1

您不应使用返回带有额外绑定的标记的复杂函数，而应将关闭图标作为通用模板的一部分：

<div class="roles-wrapper" data-bind="foreach: $root.selectedUser().roles()">
  <div class="role-token">
    <span data-bind="text: name"></span>
    <i class="fa fa-times-circle" aria-hidden="true" data-bind="click: $root.removeRoleForSelectedUser"></i>
  </div>
</div>

也应该不需要重复调​​用applyBindings，所以你至少也应该删除那部分。如果没有看到更多围绕您的问题的代码，很难说上述内容是否完全正确，但它应该可以帮助您。