1

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

我已经通过从我的服务器获取 JSON 数据并使用映射模型来映射所需的 JSON 信息来开始这个过程。我什至有包含所有必需值的父网格。现在基于父网格的选择，它应该向子网格传递 2 个值，然后应该出现子 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>

所以在父表中，数量表应该是可观察的（它应该随着子表中输入的每个数量而减少。）

任何建议将不胜感激。

4

1 回答 1

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/

于 2012-12-06T02:12:00.140 回答