knockout.js在一個視圖模型點擊，並基於該渲染視圖模型等

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> 

這是我的視圖模型

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

我要讓parentname點擊所以，當我點擊我的parentname它的孩子的被填充在沒有2視圖模型。我怎樣才能做到這一點？

Answer 1

我喜歡張貼@M. Ihsan上面的答案，但也有一些修改。的

而不是使用功能來過濾每次點擊父時間children，您可以使用ko.computed來自動完成這項工作。這樣，您也可以動態更改父項，並且您的兩個父項和子項模型保持不變。

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，然後在初始化期間將childdata傳遞給該對象而不是parentdata。

然後，您可以在SampleListViewModel1中創建一個函數，該函數將選定的父項傳遞給父對象（masterVM）。然後在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>