Knockout select binding drops property that is assigned to the select value from the associated data context
To show a quirk in the select box databinding implementation of knockout. If you try to set the value of a select to a value that doesn't exist in the select, then the datacontext drops the associated property.
HTML
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<!-- ko foreach: selectedBrands -->
<span data-bind="text: ko.toJSON($data)"></span><br/>
<select data-bind="value: $root.selected, optionsCaption: ' ', options: $root.brands, optionsText: 'name', optionsValue: 'name'"></select><br/>
<span data-bind="text: ko.toJSON($data)"></span>
<!-- /ko -->
<p>Note that the brand Honda has been removed from the $data context after trying to bind the selected value to a value that wasn't in the select. This appears to be a bug. I would expect it to either fail explicitly or at least not change the $data context.</p>
JavaScript
var vm = {
brands: [
{
"id": 1,
"name": "Ford"
},
{
"id": 2,
"name": "Chevy",
}
],
selectedBrands: ko.observableArray([
{
"id": 3,
"name": "Honda",
}
]),
selected : ko.observable()
};
ko.applyBindings(vm);