Question

我正在学习knockout.js，因此我尝试将更新json数据添加到observableArray。我正在展示json data in tabular format by knockout，这部分正在发挥作用。

当我尝试从我们这边插入json data into the observableArray然后收到错误 AddNewData未定义但我已经定义了该函数。

此外，我尝试以这种方式添加json data into observableArray无法正常工作。任何人都可以帮助我或显示代码示例吗？

由于

ko.utils.arrayForEach(NewData, function(item)
    {
        appViewModel.Stocks.push(item);
    })

我无法编写更新例程代码，因为我不知道如何在observableArray中查找和更新数据。因此，可以在此处查看完整代码http://jsfiddle.net/tridip/62Ls6x9n/1/

Answer 1

这里我发布了@SuperCool

的正确答案

table.imagetable {
    font-family: verdana, arial, sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
table.imagetable th {
    background:#b5cfd2 url('cell-blue.jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
}
table.imagetable td {
    background:#dcddc0 url('cell-grey.jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
}

<input type="button" value="Add New Data" data-bind="click:AddNewData"/>
<input type="button" value="Update Data" data-bind="click:UpdateData"/>
<br>
<br>
<table class="imagetable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:Stocks">
        <tr>
            <td>
                <Span data-bind="text:Id" />
            </td>
            <td>
                <Span data-bind="text:Name" />
            </td>
            <td>
                <Span data-bind="text:Price" />
            </td>
            <td>
                <Span data-bind="text:Status" />
            </td>
        </tr>
    </tbody>
</table>

var data = [{
    "Id": "12345",
    "Name": "Acme Widget 1",
    "Price": "£25.99",
    "Status": "In Stock"
}, {
    "Id": "67890",
    "Name": "Acme Widget 2",
    "Price": "£28.99",
    "Status": "In Stock"
}, {
    "Id": "11123",
    "Name": "Acme Widget 3",
    "Price": "£15.99",
    "Status": "In Stock"
}, {
    "Id": "14156",
    "Name": "Acme Widget 4",
    "Price": "£33.99",
    "Status": "In Stock"
}];

var NewData = [{
    "Id": "99999",
    "Name": "HSL Limited",
    "Price": "£78.99",
    "Status": "In Stock"
}];

var UpdateData = [{
    "Id": "11123",
    "Name": "",
    "Price": "",
    "Status": "Out of Stock"
}, {
    "Id": "12345",
    "Price": "31.45",
    "Name": "",
    "Status": ""
}]

var appViewModel = function() {
    var self = this;
    self.Stocks = ko.observableArray(ko.mapping.fromJS(data)());
console.log(self.Stocks())
   self.AddNewData= function() {
        //alert("add");
       ko.utils.arrayForEach(NewData, function (item) {
           //Have a duplicate id check before push
            self.Stocks.push(ko.mapping.fromJS(item));
        });
    }
   function test(val,old){
       return val == "" ? old : val ;
   }
    self.UpdateData = function() {
         ko.utils.arrayForEach(UpdateData, function (mainitem) {
             ko.utils.arrayFirst(self.Stocks(), function (subitem) {
               if(mainitem.Id===subitem.Id()){
                 subitem.Price(test(mainitem.Price,subitem.Price()));
                 subitem.Name(test(mainitem.Name,subitem.Name()));
                 subitem.Status(test(mainitem.Status,subitem.Status()));
                }
             });
        });
    }
};
ko.applyBindings(new appViewModel());

关于将json数据添加/更新到observableArray knockout.js的问题

1 个答案: