Knockout.js向数组添加新项目

Question

我无法以编程方式将元素添加到包含在数据表中的可观察数组中。

表中的每一行都有一个我希望影响的不同数组。

的HTML看起来像这样：

<div class='liveExample'>  
<h2>Cases</h2> 
<div id='contactsList'> 
    <table class='contactsEditor'> 
     <tr> 
      <th>Case Number</th> 
      <th>Stage</th> 
      <th>Users</th> 
      <th>Ids</th> 
     </tr> 
     <tbody data-bind="foreach: appearances "> 
      <tr> 
       <td> 
        <input data-bind='value: caseNumber' /> 
       </td> 
       <td><input data-bind='value: caseStage' /></td> 
       <td> 
        <ul data-bind="foreach: subjects"> 
         <li style="list-style-type:none;"><label data-bind="text: Name"/></li>  
        </ul> 
       </td> 
       <td> 
        <table> 
         <tbody data-bind="foreach: ids"> 
          <tr> 
           <td><input data-bind='value: $data' /></td> 
           <td><a href='#' data-bind='click: $root.removeId'>Delete</a></td> 
          </tr> 
         </tbody> 
        </table> 
        <a href='#' data-bind='click: $root.addId'>Add number</a> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div>  
<p> 
    <button data-bind='click: save, enable:appearances().length > 0'>Save to JSON</button> 
</p>  
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>  

的数据和JavaScript看起来像这样：

enter code here 
var initialData = [{ 
"Number": "12000009", 
"Stage": "Inital", 
"Subjects": [{ 
    "Name": "Andrew McAdam"}, 
{ 
    "Name": "Patrick Brown"}], 
"Ids": [1]}, 
{ 
"Number": "12000010", 
"Stage": "Inital", 
"Subjects": [{ 
    "Name": "John Smith"}], 
"Ids": [2, 3]}, 
{ 
"Number": "12000011", 
"Stage": "Inital", 
"Subjects": [{ 
    "Name": "James Bonner"}], 
"Ids": [4]}, 
{ 
"Number": "12000012", 
"Stage": "Processed", 
"Subjects": [{ 
    "Name": "Henrik Dalgleish"}], 
"Ids": [5]}] 

var AppearancesModel = function(appearances) { 
var self = this; 
self.appearances = ko.observableArray(ko.utils.arrayMap(appearances, function(appearance) { 
    return { 
     caseNumber: appearance.Number, 
     caseStage: appearance.Stage, 
     subjects: ko.observableArray(appearance.Subjects), 
     ids: ko.observableArray(appearance.Ids) 
    }; 
})); 

self.addId = function(appearance) { 
    appearance.ids.push(""); 
}; 

self.removeId = function(id) { 
    $.each(self.appearances(), function() { 
     this.ids.remove(id) 
    }) 
}; 

self.save = function() { 
    self.lastSavedJson(JSON.stringify(ko.toJS(self.appearances), null, 2)); 
}; 

self.lastSavedJson = ko.observable("") 
} 

ko.applyBindings(new AppearancesModel(initialData));​ 

我的问题是，后单击添加按钮和输入值时，数组中的值为空字符串（创建新数组元素时添加的值）。

我认为问题是我有一个值之前添加新项目的数组，但我认为这将被绑定到新的inpute，所以当我执行保存功能时，新值将被反映。

以上的的jsfiddle为http://jsfiddle.net/amcgoldrick/3h9GZ/

感谢

安迪

Answer 1

您添加到您的idsobservableArray是无法观测的，因此结合的方法只有一个值。如果要更新observableArray中的值，则需要使observableArray内的元素可观察。

所以不是：

self.addId = function(appearance) { 
    appearance.ids.push(""); 
}; 

你必须：

self.addId = function(appearance) { 
    appearance.ids.push({id: ko.observable("")}); 
}; 

的工作示例见http://jsfiddle.net/5wKjk/3/。 （我没有添加代码来映射现有的ID，因为我只是想演示涉及的原理，没有时间）。