带有句柄的敲除绑定到模板化元素

Question

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"); 
});

一旦我达到的用户目标可能会有所不同（跨度或 div），我需要确保我得到了正确的 div。此外 e.target 不适用于 "not a fucntion" 错误。

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

Answer 1

你应该使用 the click binding in conjunction with 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：不要t。如果绝对必要，您可能需要一个 custom binding handler，就像您在 "that other" 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>

带有句柄的敲除绑定到模板化元素

Knockout binding with a handle to templated element

html

javascript

jquery

knockout.js

knockout-3.0