knockout optionsText / optionsValue bindings won't work

Question

Why does this binding fail with a "value not found" exception?

<select data-bind="options: $root.arr, optionsValue: key, optionsText: value"></select>

The options array's data is this:

ko.observableArray ([ 
  {key: 'foo', value: '1'}, 
  {key: 'bar', value: '2'}
])

I already solved my own problem but laying down a StackOverflow breadcrumb trail so others won't waste their time like I did trying to figure this out. ;-)

Answer 1

Quotes are required around property names used in optionsText and optionsValue. Like this:

<select data-bind="options: $root.arr, optionsValue: 'key', optionsText: 'value'"></select>

I'd assumed that:

1. The options binding created a new binding context like with and foreach do
2. The optionsValue and optionsText worked like the text binding where you can just specify the property name and KO magically binds to the properties

Both assumptions were wrong, as I realized after an hour of stepping through the KO sources trying to figure out what I was doing wrong. Arrrrgh!

Instead, if you're not using a function to pull out the value or text for each option, and you want to access a property instead, you need to enclose the property name in quotes. This is shown in the documentation if you read the example code carefully enough. Which I didn't. ;-(