knockout.jsは1つのviewmodelをクリックして、他のviewmodelをレンダリング

Question

<div data-bind="with: SimpleListModel"> 
<div data-bind="foreach: parents"> 
     <span data-bind="text: parentname"></span> 
    </div> 
</div> 

<div data-bind="with: SimpleListModel2"> 
    <div data-bind="foreach: childrens"> 
     <span data-bind="text: childname"></span> 
    </div> 
</div> 

に基づいて、これは私のviewmodel

var parentsdata= [ 
{ parentid:1, parentname: "Danny" },{parentid:2, parentname: "Peter" },{parentid:3, parentname: "shawn" }]; 

var childdata= [ 
{ parentid:1, childrens: [ 
    { childname: "child1"}, 
    { childname: "child2"}] 
}, 
{ parentid:2, childrens: [ 
    { childname: "child1"}, 
    { childname: "child2"}] 
}]; 

var SimpleListModel = function(parents) { 
    var self= this; 
self.parents= ko.observableArray(parents); 
}; 

var SimpleListModel2 = function(childrens) { 
var self= this; 
self.childrens= ko.observableArray(childrens); 
}; 

var masterVM = (function() { 
     var self = this;   
     self.SimpleListModel= new SimpleListModel(parentsdata); 
      self.SimpleListModel1= new SimpleListModel1(parentsdata); 

})(); 

ko.applyBindings(masterVM); 

です2ビューモデル。どうやってやるの？

Answer 1

私は上記の@M. Ihsanによって投稿答えを好むが、いくつかの修正があります。

代わりchildrenあなたが親をクリックするたびにフィルタリングする機能を使用すると、自動的に仕事をするko.computedを使用することができます。そうすれば、親を動的に変更することができ、2つの親子モデルは元のままです。

var parentsdata = [{ parentid: 1, parentname: "Danny" }, { parentid: 2, parentname: "Peter" }, { parentid: 3, parentname: "shawn" }]; 
 

 
var childdata = [{ parentid: 1, childrens: [{ childname: "DannyChild1" }, { childname: "DannyChild2" } ] }, { parentid: 2, childrens: [{ childname: "PeterChild1" }, { childname: "PeterChild2" } ] } ]; 
 

 
var SimpleListModel = function(parents) { 
 
    var self = this; 
 
    self.parents = ko.observableArray(parents); 
 
}; 
 

 
var SimpleListModel2 = function(childrens) { 
 
    var self = this; 
 
    self.childrens = ko.observableArray(childrens); 
 
}; 
 

 
var masterVM = (function() { 
 
    var self = this; 
 
    self.SimpleListModel = new SimpleListModel(parentsdata); 
 
    self.SimpleListModel2 = new SimpleListModel2(childdata); 
 
    self.selectedParent = ko.observable(); // holds selected parent 
 
    self.ParentChildrens = ko.computed(function() { 
 
    return ko.utils.arrayFilter(self.SimpleListModel2.childrens(), function(child) { 
 
     return child.parentid == self.selectedParent(); 
 
    })[0]; 
 
    }); 
 
    self.parentClick = function(data) { 
 
    self.selectedParent(data.parentid); 
 
    } 
 
})(); 
 
ko.applyBindings(masterVM);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div data-bind="with: SimpleListModel"> 
 
    <div data-bind="foreach: parents"> 
 
    <span data-bind="text: parentname, click: parentClick"></span> 
 
    </div> 
 
</div> 
 

 
<div data-bind="with: ParentChildrens"> 
 
    <div data-bind="foreach: childrens"> 
 
    <span data-bind="text: childname"></span> 
 
    </div> 
 
</div>

Answer 2

まず、SampleListViewModel1はありません。それをSampleListViewModel2に変更し、parentdataではなく、そのオブジェクトに初期化中にchilddataを渡す必要があります。

次に、選択した親を親オブジェクト（masterVM）に渡すSampleListViewModel1で関数を作成できます。次に、masterVMで、選択した親から子を取得し、それを観察可能なオブジェクトに格納します。ビューでは、この観察可能なオブジェクトを表示するだけです。

var parentsdata = [ 
 
    { parentid:1, parentname: "Danny" }, 
 
    {parentid:2, parentname: "Peter" }, 
 
    {parentid:3, parentname: "shawn" } 
 
]; 
 

 
var childdata = [ 
 
    { parentid:1, childrens: [ 
 
    { childname: "child1 of parent1"}, 
 
    { childname: "child2 of parent1"}] 
 
    }, 
 
    { parentid:2, childrens: [ 
 
    { childname: "child1 of parent2"}, 
 
    { childname: "child2 of parent2"}] 
 
    } 
 
]; 
 

 
var SimpleListModel = function(parents, parentObject) { 
 
    var self = this; 
 

 
    // this is used to get the reference to parent object (masterVM) 
 
    self.parentObject = parentObject; 
 

 
    self.parents = ko.observableArray(parents); 
 

 
    // call this function on click and trigger the parent function which will do the filtration 
 
    self.selectParent = function(parent) { 
 
    self.parentObject.selectParent(parent); 
 
    } 
 
}; 
 

 
var SimpleListModel2 = function(childrens) { 
 
    var self = this; 
 
    self.childrens = ko.observableArray(childrens); 
 
}; 
 

 
function masterVM() { 
 
    var self = this;   
 
    
 
    // pass its own object during initialization 
 
    self.SimpleListModel = new SimpleListModel(parentsdata, self); 
 

 
    self.SimpleListModel2 = new SimpleListModel2(childdata); 
 

 
    // store children of the selected parent 
 
    self.childForSelectedParent = ko.observable(null); 
 

 
    // get the children of the selected parent 
 
    self.selectParent = function(parent) { 
 
    var children = ko.utils.arrayFirst(self.SimpleListModel2.childrens(), function(children) { 
 
     return children.parentid === parent.parentid; 
 
    }); 
 
    if(children) 
 
     self.childForSelectedParent(new SimpleListModel2(children.childrens)); 
 
    else 
 
     self.childForSelectedParent(null); 
 
    }; 
 
} 
 

 
ko.applyBindings(new masterVM());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div>Click on any of the name</div> 
 

 
<div data-bind="with: SimpleListModel"> 
 
    <div data-bind="foreach: parents"> 
 
    <span data-bind="text: parentname, click: $parent.selectParent"></span> 
 
    </div> 
 
</div> 
 

 
<div data-bind="with: childForSelectedParent"> 
 
    <div data-bind="foreach: childrens"> 
 
    <span data-bind="text: childname"></span> 
 
    </div> 
 
</div>