Выключите ленивую загрузку родитель-ребенок с помощью подключаемого модуля и KoGrid

Question

Настройка: в моей модели представления у меня есть наблюдаемый массив элементов, созданный из JSON (он имеет только имя и идентификатор), называемый "элементы". У меня также есть наблюдаемая только для выбранного элемента (она содержит полную информацию об элементе), которая называется "выбранный элемент". Когда вы щелкаете элемент из списка "items", он должен заполнить "selecteditem", который заполнит "itemdetails" полными деталями посредством другого ответа JSON, позволит вам редактировать их и сохранять изменения.

Ход выполнения: щелчок по сетке работает правильно, он получает правильный VendorID и передает его в строку запроса как /api/vendor/14, если я нажимаю vendor 14.

Проблема: Как обновить ТОЛЬКО выбранную часть моей модели представления с помощью второго вызова ajax (запускается при нажатии на один из элементов).

KoGrid HTML:

             <div class="gridContainer">
                <div data-bind="koGrid: { 
                    data: items, 
                    autogenerateColumns: false,
                    isMultiSelect: false,
                    displaySelectionCheckbox: false,
                    selectedItem: selecteditem,
                    columnDefs: [
                        { field: 'VendorID', displayName: 'Vendor ID' },
                        { field: 'Name', displayName: 'Vendor Name' }
                    ]}">
                </div>
            </div>

Дочерний HTML (только несколько полей для тестирования):

            <div data-bind="foreach: itemdetails">
                <span data-bind="text: BusinessContactName"></span><br />
                <span data-bind="text: BusinessContactTitle"></span>
            </div>

Javascript:

     <script type="text/javascript">
        $(document).ready(function () {
            var API_URL = "/api/vendor/";

            $.ajax({
                type: 'GET',
                url: API_URL,
                dataType: 'json',
                success: function (data) {
                    /* View Model */
                    window.viewModel = {
                        items: ko.mapping.fromJS(data),
                        selecteditem: ko.observable(),
                        itemdetails: ko.observable()
                    };

                    /* Get Selected Item */
                    window.viewModel.selecteditem.subscribe(function (newValue) {
                        if (newValue) {
                            var param = newValue.VendorID();
                            $.ajax({
                                type: 'GET',
                                url: API_URL + param,
                                dataType: 'json',
                                success: function (data2) {
                                    //What to do here??
                                    window.viewModel.itemdetails = ko.mapping.fromJS(data2);
                                    //This shows the correct value
                                    alert(window.viewModel.itemdetails.BusinessContactName());
                                }
                            });
                        }
                    });

                    ko.applyBindings(viewModel);
                }
            });
        });
    </script>

Answer 1

Похоже, что установка вашего viewModels itemdetails неверна.

вместо window.viewModel.itemdetails = ko.mapping.fromJS(data2);

использовать window.viewModel.itemdetails(ko.mapping.fromJS(data2));