CODEWITHSUNDEEP
javascriptknockout.js
Frank Conry
Frank Conry

Reputation: 2718

Knockout SelectedOptions binding to property of object fails

I am having trouble with a knockout options binding, specifically a multi select with selectedOptions mapping to a property of a ko.observable Here is the html:

<select data-bind="options: disabilities, optionsValue: 'id', selectedOptions: 'currentBusType().disabilities', optionsText: 'code'" multiple="true" size="5"></select>

disabilities is an ko.observableArray with the following structure:

[
  {"id":"1","code":"WC","description":"Wheel Chair"},
  {"id":"2","code":"SN","description":"Special Needs"}
]

currentBusType is a ko.observable with the following structure:

{
  "bustype_id":"2",
  "name":"Bus Type 2",
  "capacity":"20",
  "serial_number":null,
  "disabilities":[1,2]
}

The result is, according to an inspection of the DOM, a multiselect that has values and options correct but does not properly preselect the options. How should I be doing this binding and what am I doing wrong?

Upvotes: 1

Views: 400

Answers (1)

haim770
haim770

Reputation: 49095

First, you need to remove the single quotes surrounding your expression:

selectedOptions: currentBusType().disabilities

Then you need to make sure the types of the each disability id matches those in your currentBusType.disabilities. Currently, one is a Number and the other is String. So, if you change disabilities, it would look like:

"disabilities": ["1", "2"]

See Fiddle

Upvotes: 2

Related Questions