I have been struggling to understand a data-bind behavior of a dropdownlist control. I bound the source to an observable array of objects (with Text and Field properties). I want to bind the data-text-field to the Text property of the object and data-value-field to the object itself (not to it's Value property).
I tried several options:
Option1:
<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="this"></select>
SelectedValue is the whole object as a string "[object Object]". Not what I want.
Option2:
<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="this"></select>
SelectedValue is Text property of the bound object. Not what I want.
Option3:
https://jsfiddle.net/jakubjenis/z1o3L6hd/17
<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="Value"></select>
Weirdly enough this works. SelectedValue is the whole bound object (with Text and Value properties), but why? This should bind the Value property of the bound object, not the object itself.
Could you please explain what the correct way to set the data-value-field is so that the value field is bound to the whole object?
Thanks,
Jakub