Question

I’m trying to build a view that operators something similar to this:

The user chooses a parent, and then all the children show up below, where they can then edit the children’s information.

What I’d like to know is, what is the proper way to change the binding of the children grid on the fly when the user selects a new parent on the parent grid.

My view model in ko js form looks something like this right now:

function ViewModel(viewModelFromServer) {

  var self = this;

  self.parents = ko.observableArray(convertToKOParents(viewModelFromServer.Parents));

  self.activeChildren = ko.observableArray([]);

  self.changeParent(newParent){
    self.activeChildren = newParent.children;
  }
}

function Parent(serverParent) {

  var self = this;

  self.name = ko.observable(serverParent.Name);
  self.children = ko.observableArray(convertToKOChildren(serverParent.Children);

  self.childCount = ko.computed(function() {
    return self.children.length;
  });
}

function Child(serverChild) {

  var self = this;

  self.name = ko.observable(serverChild.Name);
  self.Age = ko.observable(serverChild.Age);
  self.Height = ko.observable(serverChild.Height);
}

Now, when the user clicks on a parent row, I want to switch the activeChildren to the new parent, but the binding doesn’t get applied automatically.

Is this the right approach to this kind of view model? Should I be doing it a different way and if so what would that view model look like and how do I get the child grid to bind properly when the parent changes?

Answer 1

Instead of having activeChildren, you can have activeParent and bind to it’s children:

<div data-bind="with: activeParent">
    <table>
        <tbody data-bind="foreach: children">
        </tbody>
    </table>
</div>

And since activeParent will be an observable, you just call it and you don’t need the changeParent function:

self.activeParent = ko.observable();

To change:

viewModelVariable.activeParent(newParent);

Also I think your childCount computed needs to access the underlying array by calling children():

self.childCount = ko.computed(function() {
    return self.children().length;
});