Question

I am populating a secondary table with an observable array that is a child of another observable array but when I select a row from the first table the records in the secondary table are not updated to reflect the selected record from the first table. I can see from the log messages that I have visibility to the collection so it seems like everything is working correctly but the second table is not showing the expected results.

Please see my jsFiddle here:

http://jsfiddle.net/D64Bj/5/

You will see in the log messages that when I click a row in the first table I can see how many records are in the second item in the collection and I get the right Id but the rows in the second table are not updated.

does anyone see what I am doing wrong here? Any suggestions on a better way to handle this using knockout.js? Thanks in advance!

Answer 1

You need to make ActiveTeam a ko.observable, otherwise there won’t be any binding:

Here’s the changes you need:

<tbody data-bind="foreach: ActiveTeam().Players">
...
myTeams.ActiveTeam = ko.observable(myTeams.Teams()[0]);
...
myTeams.ActiveTeam(item);

Edit: and here’s a fiddle