将值推入嵌套的ko.observableArray [英] Pushing Values Into nested ko.observableArray
问题描述
我想根据JSON Payload中的项目是否需要供应商,将供应商列表嵌套到从服务器获取的现有JSON Payload中.
I want to nest a list of vendors into an existing JSON Payload that I get from the server, based on if the item within the JSON Payload requires a vendor.
我最终想要得到的是这样的东西:
What I want to end up with is something that looks like this:
{
"ProductName": "Product123",
"RequiredComponents": "CAP 10% H/Vol",
"StockCode": "142111411",
"RequiredQtyByBom": 4,
"QtyUnassignedInWarehouse": 0,
"QtyAllocatedInWarehouse": 40,
"PCBReference": "442C",
"QtyOnOrder": 26,
"Vendors": [],
"RequireVendor": false
},
{
"ProductName": "Product123",
"RequiredComponents": "Screws",
"StockCode": "Screws",
"RequiredQtyByBom": 1,
"QtyUnassignedInWarehouse": 0,
"QtyAllocatedInWarehouse": 14,
"PCBReference": "Screws",
"QtyOnOrder": 26,
"Vendors": [
{"VendorID": "3",
"VendorName": "ABC Supplier",
"VendorMOQ": 50000,
"VendorItemPrice": 322},
{"VendorID": "4",
"VendorName": "DEF Supplier",
"VendorMOQ": 4,
"VendorItemPrice": 120}
],
"RequireVendor": true
},
{
"ProductName": "Product123",
"RequiredComponents": "14141415",
"StockCode": "151555231",
"RequiredQtyByBom": 1,
"QtyUnassignedInWarehouse": 0,
"QtyAllocatedInWarehouse": 170,
"PCBReference": "1414",
"QtyOnOrder": 26,
"Vendors": [],
"RequireVendor": false
}
我当时想通过2个AJAX调用此操作,将值推入Observable数组.
I was thinking of doing this with 2 AJAX call an push the values into the Observable array.
AJAX呼叫1:为产品创建初始有效载荷
MyDataViewModel.SelectedOrderID.subscribe = ko.computed(function () {
$.ajax({
url: "/URLToMethod/GetBomStockByProductID",
data: { OrderID: ko.toJS(MyDataViewModel.SelectedOrderID) },
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
timeout: 10000,
success: function (Result) {
for (var i = 0; i < Result.d.length; i++) {
element = Result.d[i];
MyDataViewModel.CheckStock.push({
ProductName: element.ProductName, RequiredComponents: element.RequiredComponents, StockCode: element.StockCode, RequiredQtyByBom: element.RequiredQtyByBom, QtyUnassignedInWarehouse: element.QtyUnassignedInWarehouse, QtyAllocatedInWarehouse: element.QtyAllocatedInWarehouse, PCBReference: element.PCBReference, QtyOnOrder: element.QtyOnOrder, Vendors: ko.observableArray(), RequireVendor: ko.computed(function () {
if ((element.RequiredQtyByBom * element.QtyOnOrder) > element.QtyAllocatedInWarehouse) {
return true
} else {
return false
}
})
}
);
}
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
});
AJAX调用2:将值推送到供应商ko.observableArray()在第一个有效负载中创建
MyDataViewModel.PurchaseReqHasVendorDetails = ko.computed(function () {
var self = MyDataViewModel;
for (var i = 0; i < self.CheckStock().length; i++) {
if (self.CheckStock()[i].RequirePO()) {
$.ajax({
url: "/URLToMethod/GetVendorsByProductName",
data: { ProductName: self.CheckStock()[i].ProductName },
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
timeout: 10000,
success: function (Result) {
for (var i = 0; i < Result.d.length; i++) {
element = Result.d[i];
self.CheckStock()[i].Vendors.push({ VendorID: element.VendorID, VendorName: element.VendorName, VendorMOQ: element.VendorMOQ, VendorPrice: element.VendorPrice });
}
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
return true;
} else {
return false;
}
}
});
但这不起作用.它创建了初始有效载荷,但没有获得第二个有效载荷,而是将其推入我创建的observableArray中.
But this doesn't work. It creates the initial payload but it does not obtain the second payload and push it into the observableArray that I created.
任何建议将不胜感激
推荐答案
您可以使用映射插件轻松做到这一点.假设您从服务器中检索了一个稍微不同的JS(或在收到它后对其进行了一些修改),如下所示:
You can use the mapping plugin to do this easily. Suppose you retrieve a slightly different JS from the server (or modify it a bit after you receive it), like this:
var data = {
[ /* Your example data with products and nested vendors here */ ]
}
创建视图模型可以很简单:
Creating the view models can be as simple as:
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
如果您不希望自动生成视图模型,而是使用自己的ViewModel构造函数,则可以使用映射插件添加其他映射选项".文档中有很多很好的例子.
If you don't want auto-generated view models but use your own ViewModel constructor functions you can use the mapping plugin to add additional "mapping options". The documentation has great examples on that.
这是一个带有演示的小提琴,其中包括您的数据.
Here's a fiddle with a demo that includes your data.
这篇关于将值推入嵌套的ko.observableArray的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!