Q:

knockout.js making remove button work in two viewmodels connected in one

This is my code
 <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">
    <ul data-bind="foreach: cardlists">
           <li>
               <span data-bind="text: $data"></span>
               <a href="#" data-bind="click: $root.removecard">Del</a>
           </li>
    </ul>
</div>

this is the 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 SimpleListModel2 = function(cardlists) {
    var self = this;
    self.cardlists= ko.observableArray(cardlists);
    self.removecard = function (cardlist) {
                self.cardlists.remove(cardlist);
     };
};

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

})();
ko.applyBindings(masterVM);  

This is replica in my project. The remove button stops working when i had the second viewmodel. $root.removecard is coming undefined. how can i get my $root.removecard working in this scenario with one mainviewmodel.

A:

It works when you change $root.removecard with $parent.removecard.

  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 SimpleListModel2 = function(cardlists) {
    var self = this;
    self.cardlists= ko.observableArray(cardlists);
    self.removecard = function (cardlist) {
                self.cardlists.remove(cardlist);
     };
};

var masterVM = (function () {
         var self = this;      
         self.SimpleListModel= new SimpleListModel(["Alpha", "Beta", "Gamma"]);
         self.SimpleListModel2= new SimpleListModel2([ "Tall Hat", "LongCloak"]);
      
})();
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: 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">
    <ul data-bind="foreach: cardlists">
           <li>
               <span data-bind="text: $data"></span>
               <a href="#" data-bind="click: $parent.removecard">Del</a>
           </li>
    </ul>
</div>

