knockout.js在主視圖模型視圖模型一個（新增項目是不確定的）

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> 

這是視圖模型

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

我必須有多個的ViewModels我頁面。所以對於初學者，我創建了一個視圖模型並將其放入一個主視圖模型中。但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>

Answer 2

的問題是，SimpleListModel是綁定到頁面的masterVM的屬性，這意味着你必須前綴的HTML所有觀察到的綁定與SimpleListModel像這樣：

<form data-bind="submit: SimpleListModel.addItem"> 
New item: 
<input data-bind='value: SimpleListModel.itemToAdd, valueUpdate: "afterkeydown"' /> 
<button type="submit" data-bind="enable: SimpleListModel.itemToAdd().length > 0">Add</button> 
<p>Your items:</p> 
<select multiple="multiple" width="50" data-bind="options: SimpleListModel.items"> </select> 

的jsfiddle：https://jsfiddle.net/me7Lj5r1/