带有模板化元素句柄的淘汰赛绑定答案

【问题标题】：Knockout binding with a handle to templated element带有模板化元素句柄的淘汰赛绑定
【发布时间】：2015-12-17 02:33:37
【问题描述】：

Knockout 非常棒，但我对如何处理生成后的 DOM 元素有点困惑。例如，我有一组用户。每个用户都有一个 ID：

var user = {
   id : 123,
   name : 'testUser',
   age: 45
};

使用 Knockout，我将上述数据结构的集合与以下 html 模板绑定：

<div data-bind="foreach: users">
 <div class='user-wrapper'>
   <span data-bind="text: name"></span>
   <span data-bind="text: age"></span>
 </div>
</div>

现在我想在用户点击时更改背景颜色：

$(".user-wrapper").click(function (e) {
   //doesn't work - toggelClass is not a function
   e.target.toggleClass("user-selected"); 
});

一旦我击中的用户目标可能不同（span 或 div），我需要确保获得正确的 div。此外，e.target 不适用于“不是功能”错误。

如何访问调用元素来切换类？如何获取该元素的用户 ID 以访问与该 ID 相关的其他控件？

【问题讨论】：

标签： javascript jquery html knockout.js knockout-3.0

【解决方案1】：

您应该将the click binding 与the css binding 结合使用：

<div data-bind="foreach: users">
 <div class='user-wrapper' data-bind="click: toggleSelected, css: { 'user-selected': isSelected }">
   <span data-bind="text: name"></span>
   <span data-bind="text: age"></span>
 </div>
</div>

请注意，如果您在使用 KnockoutJS（或一般的客户端 MVVM 库）时想使用 jQuery 来操作 DOM：不要。如果你绝对需要，你可能需要一个custom binding handler，就像你在“那个”mvvm 框架中使用一个指令来操作DOM。

这是一个演示：

var user = {
   id : 123,
   name : 'testUser',
   age: 45
};

var UserVm = function(data) {
  var self = this;
  
  self.name = data.name;
  self.age = data.age;
  
  self.isSelected = ko.observable(false);
  
  self.toggleSelected = function() {
    self.isSelected(!self.isSelected());
  }
};

ko.applyBindings({ users: [new UserVm(user)] });

.user-selected { background-color: red; }
.user-wrapper:hover { cursor: pointer; background-color: pink; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="foreach: users">
 <div class='user-wrapper' data-bind="click: toggleSelected, css: { 'user-selected': isSelected }">
   <span data-bind="text: name"></span>
   <span data-bind="text: age"></span>
 </div>
</div>

【讨论】：