¿Cómo se hace el enlace dinámico con KnockOut JS?

Question

estoy tratando de construir una visión de que los operadores de algo similar a esto:

El usuario elige un padre, y luego todos los hijos mostrará más adelante, donde pueden editar la información de los niños.

Lo que me gustaría saber es, ¿cuál es la forma correcta de cambiar el enlace de la cuadrícula de los niños sobre la marcha cuando el usuario selecciona un nuevo padre en la cuadrícula principal.

Mi vista del modelo en forma ko js se ve algo como esto ahora:

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); 
} 

Ahora, cuando el usuario hace clic en una fila padre, que quieren cambiar las activeChildren para quienes son padres, pero la unión no se aplica automáticamente

¿Es este el enfoque correcto para este tipo de modelo de vista? ¿Debería hacerlo de otra manera y, en caso afirmativo, cómo sería el modelo de vista y cómo puedo hacer que la cuadrícula infantil se vincule correctamente cuando el padre cambia?

Answer 1

En lugar de tener activeChildren, puede tener activeParent y se unen a su hijos:

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

Y puesto activeParent habrá un observable, que acaba de llamar y que no necesita la función changeParent:

self.activeParent = ko.observable(); 

Para cambiar:

viewModelVariable.activeParent(newParent); 

también creo que su cálculo childCount d necesita acceder al arreglo subyacente llamando al children():

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

Answer 2

Me gustaría hacer que los niños actuales un valor calculado que devuelve la propiedad de los niños del padre seleccionado. Algo como esto:

function ViewModel(viewModelFromServer) { 
    var self = this; 
    self.parents = ko.observableArray(convertToKOParents(viewModelFromServer.Parents)); 

    self.activeChildren = ko.computed(function() { 
     return self.activeParent.children 
    }); 
    self.activeParent = ko.observable() 
    self.changeParent(newParent){ 
     self.activeParent(newParent) 
    } 

} 

Si se configura una función jsFiddle sin su entorno como convertToKOParents puedo demostrar que es un poco más claramente.