KnockoutJS binding to Key/Value pair

Question

I am trying to bind to key/value pair data with KnockoutJS:

this.personal = {
  "name" : "Chuck",
  "country" : "USA"
};

In my HTML i use the $data binding:

<ul data-bind="foreach: personal">

  <li data-bind="text: $data"></li>

</ul>

which results in:

[object Object]

[object Object]

Does anybody know how my binding should look like if I want to see this:

name: Chuck

country: USA

in other words...how I can show the property name and the property value?

EDIT: Someone pointed me at: https://github.com/jamesfoster/knockout.observableDictionary But I still hope to bind without an extra library

Answer 1

There is an easier way of binding to a key-value pair using Knockout.js. Say you have a key value pair that looks like the following

myItems: [
            { Name: 'Item 1', Value: 1},
            { Name: 'Item 3', Value: 3},
            { Name: 'Item 4', Value: 4}
        ],

Just use the following html to bind to the key value pair.

<select data-bind="options: myItems, optionsText: 'Name', optionsValue: 'Value'></select>

References:

http://knockoutjs.com/documentation/options-binding.html