knockout.js观察的阵列结合

Question

这是我的代码

<div data-bind="foreach: baselist"> 
<div> 
    <span data-bind="text: basename"></span> 
    <div data-bind="foreach: subItems"> 
     <span data-bind="text: subitemname"></span> 
     <a href="#" data-bind="click: $parent.removecard">Del</a> 
    </div>  
</div> 
<button data-bind="click:addChild">Add</button> 

这是我的视图模型

var SimpleListModel2 = function(baselist) { 

    this.baselist= ko.observableArray(baselist); 
    this.addChild = function(list) { 
     alert(list.basename()); 
    }.bind(this); 

    self.removecard = function (cardlist) { 
       this.cardlists.remove(cardlist); 
    }; 
}; 

这是我的数据我传递到视图模型。我如何在这些数据中包含baselist？它不能找到基地列表

var initialData = [{ 
    { basename: "Danny", subItems: [ 
     { subitemname: "Mobile"}, 
     { subitemname: "Home"}] 
    }, 
    { basename: "Sensei", subItems: [ 
     { subitemname: "Mobile"}, 
     { subitemname: "Home"}] 
    }]; 

Answer 1

从您提供的html，我可以看到，结构是这样的。

baselist - > {（baseName的），（子项目 - > subitemName）}

所以好像你只需要在初始化过程中传递的数据视图模型。这里删除括号alert(list.basename);，因为这不是一个可观察的对象。

var SimpleListModel2 = function(baselist) { 
 
    this.baselist = ko.observableArray(baselist); 
 
    this.addChild = function(list) { 
 
    alert(list.basename); 
 
    }.bind(this); 
 
}; 
 

 
var initialData = [ 
 
{ basename: "Danny", subItems: [ 
 
    { subitemname: "Mobile"}, 
 
    { subitemname: "Home"}] 
 
}, 
 
{ basename: "Sensei", subItems: [ 
 
    { subitemname: "Mobile"}, 
 
    { subitemname: "Home"}] 
 
}]; 
 

 
ko.applyBindings(new SimpleListModel2(initialData));

<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 data-bind="foreach: baselist"> 
 
    <div> 
 
    <span data-bind="text: basename"></span> 
 
    <div data-bind="foreach: subItems"> 
 
     <span data-bind="text: subitemname"></span> 
 
    </div>  
 
    </div> 
 
    <button data-bind="click:$parent.addChild">Add</button> 
 
</div>