Question

我正在尝试使用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"
    }]
};

最后我的简单表：

 <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而减少。）

非常感谢任何建议。

Answer 1

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/

组成了一个工作小提琴

使用KnockoutJS Observable数组的嵌套表（父和子表）

1 个答案: