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

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按钮并输入值之后，数组中的值是空字符串（我在创建新数组元素时添加的值）

我认为问题在于我在获得值之前将新项添加到数组中，但我认为它将绑定到新输入，因此当我执行Save函数时，新值将被反映出来

上面的JsFiddle位于

谢谢

---

Andy

您添加到

ID

observableArray

中的值是不可观察的，因此绑定只是一种方式。如果要更新

observatarray

内的值，则需要使

observatarray

内的元素可见

因此，不是：

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

你应该：

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

---

有关工作示例，请参见。（我没有添加代码来映射您现有的ID，因为我只是想演示所涉及的原则，没有时间）。

您添加到

ID

的值是不可观察的，因此绑定只是一种方式。如果要更新

observatarray

内的值，则需要使

observatarray

内的元素可见

因此，不是：

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

你应该：

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

---

有关工作示例，请参见。（我没有添加代码来映射您现有的id，因为我只是想演示所涉及的原则，没有时间）。

非常好，这有助于我更进一步导致添加具有属性

id

和值

“”

的对象。我不知道如何加一个简单的整数。你看过小提琴了吗？在标记中，我更改了绑定，以便它们处理“id”属性。此外，如果您想将值绑定到输入框，那么当您在文本框中输入内容时，knockout将始终将字符串写回您的模型。因此，我不关心您的值是整数还是字符串。毕竟，JavaScript中的1==“1”。对不起，马克，我有点混淆了我的JSFIDLE窗口。你提供的东西很完美。映射现有id所需的代码是

ids:ko.observatarray（ko.utils.arrayMap（appearance.ids，function（x）{return{id:x}；}））

非常好，这有助于我更进一步导致添加具有属性

id

和值

“”

的对象。我不知道如何加一个简单的整数。你看过小提琴了吗？在标记中，我更改了绑定，以便它们处理“id”属性。此外，如果您想将值绑定到输入框，那么当您在文本框中输入内容时，knockout将始终将字符串写回您的模型。因此，我不关心您的值是整数还是字符串。毕竟，JavaScript中的1==“1”。对不起，马克，我有点混淆了我的JSFIDLE窗口。你提供的东西很完美。映射现有id所需的代码是

ids:ko.observatarray（ko.utils.arrayMap（appearance.ids，function（x）{return{id:x}；}））

根据@Mark Robinson的建议，我添加了以下代码来映射原始id

ids:ko.observatarray（ko.utils.arrayMap（appearance.Ids，function（id）{return ko.observable（id）}））

和我的原始id都会显示出来。我现在遇到的问题是'appearance.Ids.push（{id:ko.observable（“”）}）；'向整数数组添加一个id属性的对象。根据@Mark Robinson的建议，我添加了以下内容来映射原始id

ids:ko.observearray（ko.utils.arrayMap（appearance.ids，function（id）{return ko.observeable（id）}）

并显示我的原始id。现在的问题是'appearance.ids.push'（{id:ko.observable（“”}）；'将具有id属性的对象添加到整数数组中。