Knockout.js get dom object associated with data

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.

Example:

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

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.

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.

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

Solution 1:

Event handlers like click get passed two arguments. That is

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).

2. 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);
       // ...
   }
   

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.

And here is a simple demo: 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>

Solution 2:

The $(event.target) solution is good if it is related to an already occurring event in which the item's DOM element is at target. But sometimes you don't have the targeted item because there is no event (for example - you want to scroll a list to an item that was not gestured by the user).

In such case you can give the item's DOM element id attribute a unique value that contains the item id:

<li data-bind="attr: {id: 'item_' + id}">

and then getDomObject() looks like:

getDomObject = function(item) { return $("#item_" + item.id); }