nested-table-with-knockoutjs-observable-arraysparent-child-table

http://stackoverflow.com/questions/13718841/nested-table-with-knockoutjs-observable-arraysparent-child-table

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/humanity/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<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>
    <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: 3"/>
                </td>
            </tr>
            </tbody>
            </table>
        </div>
    </td>
</tr>
</tbody>
</table>
 
<div data-bind="text: ko.mapping.toJSON($root)">
</div>

JavaScript

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

var ProductViewmodel;
//debugger; 

function bindProductModel(Products) {
    var self = this;
    self.items = ko.mapping.fromJS([]);
    ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
    console.log(ProductViewmodel());

}

function bindModel(vm, data) {
    var self = this;
    vm.Locations = ko.mapping.fromJS(data.d);
     console.log(ProductViewmodel());
}

$(document).ready(function() {
    bindProductModel(data);
    bindModel(ProductViewmodel()[0], data2);
    ko.applyBindings(ProductViewmodel);
    $('#child').click(function() {
        $('#childtable').show();
    });
});