javascript - knockout.js one viewmodel in main viewmodel(add item become undefined) -

this code

<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> 

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 mastervm = (function () {          var self = this;                self.simplelistmodel= new simplelistmodel(["alpha", "beta", "gamma"]);  })(); ko.applybindings(mastervm);  

i have have multiple viewmodels on page . starter have created viewmodel , put in 1 master viewmodel. additem becomes undefined. why so? how can have approach working?

edited

  <div data-bind="with: viewmodel2">        <div>            <span data-bind="text: boardtext" />                                  </div>                   <a href="#" id="addvar" data-bind="click: addlist ,visible: sh">add list</a><br /><br />        <form method="post">                    <div data-bind="foreach: lists" id="thumbnails">                         <div class="thumbnail-container">                <span data-bind="text:listname"></span><br /><br /><br /><br />                <div id="abc">                    <ul class="list-group" data-bind="foreach: cardlists">                        <li class="list-group-item">                            <span data-bind="text: cardname"></span>                            <a href="#" data-bind="click: $root.removecard">del</a>                        </li>                    </ul>                    <a href="#" data-bind="click:  $parent.showhideaddcard,visible: cardvisiblity">add card</a><br />                    <div data-bind="visible: showrendertimes">                        <input type="text" data-bind="value: $parent.cardtext" /><br /><br /><br />                        <input type="button" value="add" data-bind="click: $parent.addcard" />                        <input type="button" value="cancel" data-bind="click: $parent.cancelcard" />                    </div>                    <div data-bind="visible: showlist">                        <input type="text" data-bind="value: $parent.listtext" /><br /><br />                        <input type="button" value="save list" data-bind="click: $parent.addbuttonlist" />                    </div>                </div>            </div>        </div>         <p class="alignright">            <input type="submit" value="update">        </p>    </form>  </div> 

you need wrap form using with: .... here sample.

var simplelistmodel = function(items) {    this.items = ko.observablearray(items);    this.itemtoadd = ko.observable("");    this.additem = function() {      console.log("trigger additem");    }.bind(this);  // ensure "this" view model  };    var mastervm = (function () {    var self = this;          self.simplelistmodel= new simplelistmodel(["alpha", "beta", "gamma"]);        })();    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>