Knockout update cell value in table - arrays

Question

When I change selection in column B, the text in column A should change too, but not.
Why?
HTML:
<table>
<thead>
<tr>
<th style="width: 100px;">A</th>
<th style="width: 100px;">B</th>
</tr>
</thead>
<tbody data-bind="foreach: Data">
<tr>
<td><span data-bind="text: idOpt"></span></td>
<td><select data-bind="options: $root.MyOptions, optionsText: 'name', optionsValue: 'id', value: idOpt"></select></td>
</tr>
</tbody>
</table>
JS:
function AppViewModel() {
var self = this;
self.MyOptions = ko.observableArray([
{id: 'a1', name: 'One'},
{id: 'a2', name: 'Two'},
{id: 'a3', name: 'Three'}
]);
self.Data = ko.observableArray([
{idOpt: 'a1'},
{idOpt: 'a2'},
{idOpt: 'a1'}
]);
}
var vm = new AppViewModel();
ko.applyBindings(vm);
http://jsfiddle.net/bnowicki/CrVBr/2/
Please help.

Answer 1

You must declare the items in your Data array as observables if you want them to bind/update.
function AppViewModel() {
var self = this;
self.MyOptions = ko.observableArray([
{id: 'a1', name: 'One'},
{id: 'a2', name: 'Two'},
{id: 'a3', name: 'Three'}
]);
self.Data = ko.observableArray([
{idOpt: ko.observable('a1')},
{idOpt: ko.observable('a2')},
{idOpt: ko.observable('a1')}
]);
}
var vm = new AppViewModel();
ko.applyBindings(vm);
The Knockout documentation shows you the difference between using plain models, and then models with observables http://knockoutjs.com/documentation/observables.html