Knockout.js向数组添加新项

我在用程序将元素添加到数据表中包含的可观察数组时遇到了问题。

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

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

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

我认为问题是，在我有值之前，我会将新项添加到数组中，但我认为它会绑定到新的inpute，所以当我执行Save函数时，新值会被反映出来。

上述JsFiddle位于http://jsfiddle.net/amcgoldrick/3h9GZ/

感谢

Andy