使用KnockoutJS Observable数组的嵌套表（父表和子表）
我正在尝试使用KnockoutJS构建嵌套的可编辑网格视图，我不知道在哪里或如何处理它。
我已经通过从我的服务器获取JSON数据并使用Mapping Model映射所需的JSON信息来启动该过程。 我甚至拥有包含所有必需值的父网格。 现在，根据父网格的选择，它应该将2个值传递给Child，然后应该出现Child JSON方法。 而且因为它的淘汰显然应该是完全可观察的。
这是我到目前为止所做的代码：
var ProductViewmodel; function bindProductModel(Products) { var self = this; self.items = ko.mapping.fromJS([]); ProductViewmodel = ko.mapping.fromJS(Products.d, self.items); console.log(ProductViewmodel); ko.applyBindings(ProductViewmodel); } function bindModel(data) { var self = this; self.Locations = ko.mapping.fromJS([]); viewModel = ko.mapping.fromJS(data.d, self.Locations); console.log(viewModel); ko.applyBindings(viewModel); } $(document).ready(function () { bindProductModel(data); $('#child').click(function () { bindModel(data2); $('#childtable').show(); }); }); 从服务器获取的JSON
var data = { "d": [{ "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.ProductStagingMethod", "ProductSKUID": 2, "ProductSKUName": "Decoder 1131", "WarehouseID": 1, "WarehouseName": "SoftwareDevelopmentTest", "SystemAreaName": "Staging", "Qty": 5 }] }; var data2 = { "d": [{ "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.StockReturnMethod", "LotID": 3, "LotName": "TestLot3", "AreaID": 11, "AreaName": "TestArea2L3", "BinID": 20, "BinName": "Area10Bin1" }, { "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.StockReturnMethod", "LotID": 4, "LotName": "TestLot4", "AreaID": 15, "AreaName": "TestArea2L4", "BinID": 24, "BinName": "Area14Bin1" }, { "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.StockReturnMethod", "LotID": 2, "LotName": "TestLot2", "AreaID": 8, "AreaName": "TestArea3L2", "BinID": 18, "BinName": "Area8Bin2" }] };
最后我的简单表：
所以在父表中，Qty表应该是Observable（它应该随着子表中输入的每个QTY而减少。）
任何建议将不胜感激。
JavaScript中出现了几个问题。
最大的问题是您在单击ShowMeBUtton后添加位置数据。 在这种情况下，让Knockout正常工作并不容易。 因此，我修改了代码，以便在执行ko.applyBinding之前将位置数据添加到视图模型中。
简化的JavaScript如下。
function bindProductModel(Products) { var self = this; self.items = ko.mapping.fromJS([]); ProductViewmodel = ko.mapping.fromJS(Products.d, self.items); } function bindModel(vm, data) { vm.Locations = ko.mapping.fromJS(data.d); } $(document).ready(function() { bindProductModel(data); bindModel(ProductViewmodel()[0], data2); ko.applyBindings(ProductViewmodel); $('#child').click(function() { $('#childtable').show(); }); });
我把一个工作小提琴放在一起： http ： //jsfiddle.net/photo_tom/p6dW6/23/