javascript - 带有模板化元素句柄的 knockout 绑定(bind)

Question

Knockout 非常棒，但我对生成 DOM 元素后如何处理它们感到有点困惑。例如，我有一个用户集合。每个用户都有一个 ID:

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

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

<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 相关的其他控件？

Answer 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>