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 に答える