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> 

で、これはこれは私がのviewmodelに渡しています私のデータである私のviewmodel

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

です。このデータにベースリストを含めるにはどうすればよいですか？それはベースリストを見つけることができません

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

Answer 1

あなたが提供したhtmlから、私はその構造がこのようであることがわかります。

baselist - > {（たbaseName）、（サブ項目 - > subitemName）}

あなただけの初期化中にのViewModelにデータを渡す必要があるようなので、それはそうです。そして、これは観測可能なオブジェクトではないので、括弧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>