嵌套表与KnockoutJS Observable数组（父和子表）

问题描述

我正在尝试使用KnockoutJS构建嵌套的可编辑网格视图，我不知道在哪里或如何处理它。

I am trying to build a Nested Editable gridview with KnockoutJS, and I have no idea where or what to do with it.

我已经通过获取启动了该过程来自我的服务器的JSON数据，并使用Mapping Model映射所需的JSON信息。我甚至拥有包含所有必需值的父网格。
现在根据父网格的选择，它应该将2个值传递给Child，然后应该出现Child JSON方法。而且因为它显然是淘汰，所以它应该是完全可观察的。

I have started the process by obtaining JSON data from my server and using the Mapping Model to map the required JSON info. I even have the Parent grid with all the required Values.Now Based on the selection of the parent grid it should Pass 2 values to the Child then the Child JSON method should appear. And because it's knockout obviously it should be completely observable.

这是我到目前为止所做的代码：

Here is the Code that I have done so far:

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：

The JSON that get's returend From Server:

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>

所以在父表中，Qty表应该是Observable（它应该随着子表中输入的每个QTY而减少。）

So In the Parent Table the Qty table should be the Observable (It should decrease with each QTY entered in the Child Table.)

我们非常感谢任何建议。

Any advice would be greatly appreciated.

推荐答案

JavaScript出现了几个问题。

There are several problems that appear with the JavaScript.

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

The biggest problem was caused by your adding the location data after clicking on the ShowMeBUtton. It's not easy to make Knockout work properly in this situation. So, I modified code so that the location data is added to the view model before doing the ko.applyBinding.

简化的JavaScript在下面。

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

我把一个工作小提琴放在一起：

I've put together a working fiddle at: http://jsfiddle.net/photo_tom/p6dW6/23/

这篇关于嵌套表与KnockoutJS Observable数组（父和子表）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！