Knockout.js 获取与数据关联的 dom 对象 [英] Knockout.js get dom object associated with data

问题描述

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

I'm working with knockout.js to build dynamic lists and I'm trying to figure out how I can get the DOM object associated with an object in my observable array. Specifically I want to get the jQuery for a row.

示例:

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

在 getDomObject 函数中，我希望能够获取特定的

DOM 对象，以便我可以执行一些 jQuery用它操纵.

in the getDomObject function, I would like to be able to get the specific <li></li> DOM object so that I can do some jQuery manipulation with it.

我想过在 Item ViewModel 中添加一个 id 成员，然后将 id 添加为 line item 的 html id，然后根据它进行选择，但我觉得应该有一个更简单的大大地.

I've thought about adding an id member to the Item ViewModel and then add the id as the line item's html id and then select based on that, but I feel that there should be an easier way.

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

What is the proper way to reference the dynamic HTML generated by knockout.js?

推荐答案

像 click 这样的事件处理程序会传递两个参数.那是

Event handlers like click get passed two arguments. That is

1. 此事件所属的项目 - 就像您使用 foreach 绑定呈现的可观察数组的条目(在您的情况下为项目").

1. the item that this event belongs to - like the entry of an observable array that you're rendering with the foreach binding ("Item" in your case).

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

And, an event object, that provides you with more information about the actual event. This object contains the DOM element that got clicked on (key "target"):

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

请注意:不要混合使用淘汰赛和原生 jQuery DOM 操作 - 如果您可以通过巧妙的淘汰赛绑定获得相同的结果，我建议您使用它.

Just a note: Don't mix knockout and native jQuery DOM manipulations - if you can achieve the same result with clever knockout bindings, I would recommend going with that.

这是一个简单的演示: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>

这篇关于Knockout.js 获取与数据关联的 dom 对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！