KnockOut JS ile dinamik bağlama nasıl yapılır?

Question

Ben buna benzer operatörleri şey bir görünüm oluşturmak çalışıyorum:

kullanıcı bir ebeveyne seçmesi ve ardından bütün çocuklar o zaman çocuk bilgilerini düzenleyebilir nerede, aşağıda gösterilir.

Bilmek istediğim, kullanıcı ana ızgara üzerinde yeni bir üst öğe seçtiğinde, çocuk ızgarasının bağlanma biçimini değiştirmenin doğru yolu nedir? Bir üst satırda tıkladığında, yeni ebeveyne activeChildren geçmek istediğinizde, Şimdi

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

fakat bağlayıcı:

ko js şeklinde Bence modeli şimdiki gibi bir şey görünüyor otomatik olarak uygulanmaz.

Bu tür bir bakış modeline doğru yaklaşım bu mu? Bunu farklı bir şekilde yapmalı mıyım eğer öyleyse, bu model nasıl görünecek ve ebeveyn değiştiğinde alt ızgarayı düzgün bir şekilde nasıl bağlayacağım?

Answer 1

yerine activeChildren sahip, sen activeParent var ve çocukları var bağlanabildiği:

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

Ve activeParent beri

bir gözlemlenebilir olacak, sadece diyoruz ve changeParent işlevini gerekmez:

self.activeParent = ko.observable(); 

değiştirmek için :

viewModelVariable.activeParent(newParent); 

Ayrıca senin childCount bilgi işlem düşünüyorum d children() arayarak yatan dizi erişmek gerekir:

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

Answer 2

Geçerli çocuklara seçilen üst öğenin alt öğelerini döndüren hesaplanmış bir değer yapardım. Böyle bir şey:

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

} 

Eğer convertToKOParents gibi çevre fonksiyonu olmayan bir jsfiddle kurarsanız biraz daha net bir şekilde gösterebilir.