knockout.jsは、メインのviewmodelにネストされたのviewmodelとのviewmodelで

Question

<div data-bind="with: SimpleListModel"> 
<form data-bind="submit: addItem" > 
    New item: 
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /> 
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button> 
    <p>Your items:</p> 
    <select multiple="multiple" width="50" data-bind="options: items"> </select> 
</form> 
</div> 


<div data-bind="with: SimpleListModel2"> 
<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:$parent.addChild">Add</button> 
</div> 
</div> 

を動作しません、これはこれは私が私のプロジェクトで構成小さなコードスニペットでのviewmodel

var SimpleListModel = function(items) { 
    this.items = ko.observableArray(items); 
    this.itemToAdd = ko.observable(""); 
    this.addItem = function() { 
     if (this.itemToAdd() != "") { 
      this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update. 
      this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable 
     } 
    }.bind(this); // Ensure that "this" is always this view model 
}; 

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

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

    self.removecard = function (data) { 
    //tried 
     data.baselist.subItems.remove(data); 
     data.subItems.remove(data); 
     $.each(self.baselist(), function() { this.subItems.remove(data) }) 
    }; 
}; 

var masterVM = (function() { 
     var self = this;  
     self.SimpleListModel= new SimpleListModel(["Alpha", "Beta", "Gamma"]); 
     self.SimpleListModel2= new SimpleListModel2(initialData); 

})(); 

ko.applyBindings(masterVM); 

で削除します。誰かがカードを取り除くことができますか？私の質問の最後の2つの増分は同じタイプです。この質問は私が到達する最高のものです。

ここでは少なくともこのシナリオではremovecardは機能しません。

Answer 1

$parents[index]を使用して特定の親を取得してください。 http://knockoutjs.com/documentation/binding-context.html。

$parents[0] - >親

$parents[1] - >壮大な親

など

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

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

 
    self.removecard = function (data) { 
 
    //tried 
 
    console.log(data); 
 
    }; 
 
}; 
 

 
var masterVM = (function() { 
 
    var self = this;  
 
    self.SimpleListModel2= new SimpleListModel2(initialData); 
 
})(); 
 

 
ko.applyBindings(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 data-bind="with: SimpleListModel2"> 
 
    <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: $parents[1].removecard">Del</a> 
 
     </div>  
 
    </div> 
 
    <button data-bind="click:$parent.addChild">Add</button> 
 
    </div> 
 
</div>