嵌套表与KnockoutJS可观察数组（父＆子表）

Question

我想用KnockoutJS来构建一个嵌套的可编辑gridview，我不知道在哪里或如何处理它。

我已经开始通过从我的服务器获取JSON数据并使用映射模型映射所需的JSON信息。我甚至有父网格与所有必需的值。 现在基于父网格的选择，它应该将2值传递给Child，然后应该出现Child 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" 
    }] 
}; 

最后我简单的表：

<table border="1" cellpadding="0" cellspacing="0"> 
<tbody data-bind="foreach: items"> 
    <tr> 
    <td> 
     <input type="button" name="ShowmetheChild" value="ShowmetheChild" id="child" /></td> 
    <td data-bind="text: ProductSKUID"></td> 
    <td data-bind="text: ProductSKUName"></td> 
    <td data-bind="text: WarehouseID"></td> 
    <td data-bind="text: WarehouseName"></td> 
    <td data-bind="text: SystemAreaName"></td> 
    <td data-bind="text: Qty"></td> 
    <div id="childtable" style="display: none";> 
     <table> 
     <tbody data-bind="foreach: Locations> 
     <tr> 
      <td data-bind="text: LotName"></td> 
      <td data-bind="text: AreaName"></td> 
      <td data-bind="text: BinName"></td> 
      <td><input type="text" name="Qty" data-bind="text: 0" /></td> 
     </tr> 
     </tbody> 
     </table> 
    </div> 
    </tr> 

    </tbody> 

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

该得到的returend从服务器的JSON所以在父表中，数量表应该是可观察的（它应该随着在子表中输入的每个数量而减少e。）

任何意见将不胜感激。

Answer 1

JavaScript存在几个问题。

最大的问题是您点击ShowMeBUtton后添加了位置数据。在这种情况下使Knockout正常工作并不容易。所以，我修改了代码，以便在执行ko.applyBinding之前将位置数据添加到视图模型。

简体中文JavaScript is below。

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/