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

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，因此您至少应该删除该部分。如果没有看到更多关于你的问题的代码，很难说上面是否完全正确，但它应该让你顺利。