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

this 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 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 item. writing "items" observablearray causes associated ui update.             this.itemtoadd(""); // clears text box, because it's bound "itemtoadd" observable         }     }.bind(this);  // ensure "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 replica in project. remove button stops working when had second viewmodel. $root.removecard coming undefined. how can $root.removecard working in scenario 1 mainviewmodel.

it works when change $root.removecard $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 item. writing "items" observablearray causes associated ui update.              this.itemtoadd(""); // clears text box, because it's bound "itemtoadd" observable          }      }.bind(this);  // ensure "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>