jquery - Knockout.js 获取与数据关联的 dom 对象

Question

我正在使用 knockout.js 来构建动态列表，并且我正在尝试弄清楚如何获取与可观察数组中的对象关联的 DOM 对象。具体来说，我想获取一行的 jQuery。

示例:

<ul data-bind="foreach: Item">
    <li data-bind="events: {click: getDomObject}, text: 'text: ' + text">
    </li>
</ul>

在 getDomObject函数，我希望能够得到具体的<li></li> DOM 对象，以便我可以用它进行一些 jQuery 操作。

我考虑过添加 id成员到 Item ViewModel 中，然后将 id 添加为行项目的 html id，然后基于该 id 进行选择，但我觉得应该有一种更简单的方法。

引用knockout.js生成的动态HTML的正确方法是什么？

Answer 1

像单击这样的事件处理程序会传递两个参数。那就是

1. 此事件所属的项目 - 就像您使用 foreach 绑定(bind)渲染的可观察数组的条目(在您的情况下为“Item”)。

2. 还有一个事件对象，它为您提供有关实际事件的更多信息。该对象包含被点击的 DOM 元素(键“target”):

   getDomObject = function(item, event) {
       var $this = $(event.target);
       // ...
   }
   

请注意:不要混合 knockout 和 native jQuery DOM 操作 - 如果您可以通过巧妙的 knockout 绑定(bind)获得相同的结果，我建议您这样做。

这是一个简单的演示:http://jsfiddle.net/KLK9Z/213/

var Item = function(color) {
  this.color = String(color);
  this.setTextColor = function(item, event) {
    $(event.target).css('background', color);
  };
};

ko.applyBindings(new function() {
  this.Items = ko.observableArray([
    new Item('red'),
    new Item('blue'),
    new Item('green')
  ]);
}());

li {
  padding: 2px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul data-bind="foreach: Items">
  <li>
    <button data-bind="click: setTextColor, text: 'Color: ' + color"></button>
  </li>
</ul>