CODEWITHSUNDEEP
arraysbindingknockout.js
Bartosz N.
Bartosz N.

Reputation: 13

Knockout update cell value in table

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.

Upvotes: 1

Views: 657

Answers (1)

SlaterCodes
SlaterCodes

Reputation: 1139

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

Upvotes: 2

Related Questions