knockout.js Entfernen Sie nicht mit verschachtelten Viewmodel und Viewmodel in Hauptansichtsmodell

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> 

Dies ist der 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); 

Dies ist ein kleiner Code-Schnipsel i meines Projekts aufgebaut funktioniert. Kann jemand Karten entfernen lassen? Die letzten zwei Schritte meiner Fragen sind vom selben Typ. aber diese Frage ist die höchste, die ich erreiche.

Removecard funktioniert jetzt in diesem Szenario zumindest für mich nicht.

Answer 1

Verwenden Sie $parents[index], um zu bestimmten Eltern zu gelangen. http://knockoutjs.com/documentation/binding-context.html.

$parents[0] -> Mutter

$parents[1] -> Großeltern

etc

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>