Intereting Posts
Заголовки ответа на запрос перекрестных доменов jQuery Как изменить число датпикера jQuery число месяцев динамически / отзывчиво jQuery аккордеон, прокрутка начала щелкнутой вкладки вверху, не работает, если расширенная вкладка выше той, которая нажата? Отменить выбор радиостанции Jquery и Ajax для динамической загрузки IFrame Javascript static / singelton – это vs _this vs имя объекта jQuery пользовательский перетаскиваемый управляющий слайд без jQuery UI JavaScript / jQuery при нажатии, дважды подтвердите огонь Заполнение с помощью json-объекта как изменить время закрытия рабочего стола HTML5, чтобы не автоклинировать? Получение даты из ответа HTTP-заголовка Как добавить datepicker в asp.net Управление Gridview Выполнение jQuery’s .prev (). Prev (). Prev (). Найти («selector») вызовы проще Проверьте входной файл для правильного формата с помощью jquery jQuery ajax, похоже, изменяет данные SVG, отправленные на сервер coldfusion

Вложенная таблица с массивом наблюдаемых массивов KnockoutJS (Parent & Child Table)

Я пытаюсь построить Nested Editable gridview с помощью KnockoutJS, и я понятия не имею, где и что с ним делать.

Я начал процесс, получив данные JSON с моего сервера и используя модель сопоставления для сопоставления требуемой информации JSON. У меня даже есть grid родителя со всеми необходимыми значениями. Теперь, основываясь на выборе родительской сетки, он должен передать 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, который получает returend С сервера:

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

И, наконец, моя простая таблица:

  

Таким образом, в родительской таблице таблица Qty должна быть наблюдаемой (она должна уменьшаться с каждым значением QTY, введенным в дочернюю таблицу).

Любые советы будут очень признательны.

В JavaScript есть несколько проблем.

Самая большая проблема была вызвана добавлением данных о местоположении после нажатия на ShowMeBUtton. В этой ситуации работать с нокаутом непросто. Итак, я модифицировал код, чтобы данные местоположения были добавлены в модель представления, прежде чем делать 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/