javascript - Knockout.js 主视图模型中的一个 View 模型(添加项变为未定义)

Question

这是代码

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

这是 View 模型

    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 masterVM = (function () {
         var self = this;      
         self.SimpleListModel= new SimpleListModel(["Alpha", "Beta", "Gamma"]);

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

我的页面上必须有多个 View 模型。因此，对于初学者，我创建了一个 View 模型并将其放入一个主视图模型中。但 addItem 变得未定义。为什么会这样呢？我怎样才能让这种方法发挥作用？

已编辑

  <div data-bind="with: viewModel2">
       <div>
           <span data-bind="text: boardtext" />                          
       </div>           
       <a href="#" id="addVar" data-bind="click: addList ,visible: sh">Add a 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>

Answer 1

您需要使用 with: ... 来包装表单。这是示例。

var SimpleListModel = function(items) {
  this.items = ko.observableArray(items);
  this.itemToAdd = ko.observable("");
  this.addItem = function() {
    console.log("trigger AddItem");
  }.bind(this);  // Ensure that "this" is always 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>