Tasked with creating an internal dashboard we decided to go with Shopify’s Dashing framework. However, I ran into a problem when using the data-foreach binding to iterate over a hash where I needed to access both the key and the value. Unable to find the solution in the documentation or online I turned to the batmanjs freenode irc channel.As it turns out the solution is very simple.

The data-foreach binding iterates over the keys. Use the key to lookup the value and boom goes the dynamite.

Hash:

Products = { product1: '$1', product2: '$2' }


View:

<ul>
<li data-foreach-product="Products">
<span data-bind="product"></span>
<span data-bind="Products[product]"></span>
</li>
</ul>


Output:

<ul>
<li>
<span data-bind="product">product1</span>
<span data-bind="Products[product]">$1</span> </li> <li> <span data-bind="product">product2</span> <span data-bind="Products[product]">$2</span>
</li>
</ul>