More recently, I’ve been writing a lot of client side code for some interfaces on a new platform I’ve been designing. I have discovered a new toolkit that allows data binding of elements and providing a more rich user interaction through observable objects. One issue I ran into was the ability to to bind element id’s on a foreach loop of data elements. I looked around and didn’t see much about the issue, but thought others may run into the desire to add this element data to lists as well.

After you data-bind your particular array of items, or whatever element you want to use, the easiest way to get this data onto your DOM is to use the attr selector within your internal data.

For example:

   1: <tbody data-bind="foreach: items">

   2:             <tr data-bind="attr: {id: ItemId}" >

   3:                 <!-- item template goes here -->

   4:             </tr>

   5:         </tbody>


As you can see, through this binding attribute, you can bind almost any element to values within the DOM, which can be very helpful in the development process of advanced client interfaces.