Question

这里是从服务器端返回的json数据。我已经通过KnockoutJS foreach binding，

在下面的示例json中填充了我的html表

{
 { "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"  }
}

我正在使用SignalR，当表格中的数据发生变化时通知我，如下所示，

 { "Id": "11123", "Status": "Out of Stock"  }   /* Out of Stock message */
 { "Id": "12345", "Price": "31.45" }            /* Price Change message */

KnockoutJS通知了新数据，

{ "Id": "14177", "Name": "Dubli Widget Bazar", "Price": "£102.99", "Status": "In Stock"  }

现在告诉我如何执行插入或更新现有数据。请参阅表格中已存在标识为11123 & 12345的两个数据，因此在这种情况下，我想更新只能通过ID查找并更新状态和价格的数据。

SignalR通知的最后一个数据是新的，因此我会将该数据插入到我的表格中，该表格由KnockoutJS foreach binding填充。

我是Knockout的新手。因此，指导我如何更新现有数据，如果没有找到也会插入新数据。我喜欢先找到id ...如果找到然后更新现有的，或者如果id是new，那么将作为新数据插入。我将更新数据或插入表的那一刻应该反映出变化。请帮我提供示例代码。

由于

Answer 1

我在这里粘贴来自@SuperCool的回答。感谢

js文件依赖

jquery file need to add with version 1.6.4
http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js
http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js

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

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

Answer 2

//main
var data = getLast();
var item = findById(3);
if (item === undefined)
    insert(data);
else 
    update(item, data);

//loop (if necessary)
for (var i = 0; i < self.items().length; i++) {
   //loop code through obserbble array
}

//insert
function insert(data) {
    self.items.push(data)
}

//update
//you could copy all properties if they are not binded
function update(old, _new) {
    old.p = _new.p;
    ...
}
//you could only reference the new data if they are binded
function update(old, new) {
    old.p(new .p); //maybe "old = new works", not sure
    ...
}

如何通过KnockoutJS

2 个答案:

js文件依赖