使用映射插件& amp;淘汰父子延迟负载KoGrid

时间:2012-11-19 21:30:14

标签: knockout.js knockout-mapping-plugin knockout-2.0 kogrid

设置: 在我的viewmodel中,我有一个可观察的项目数组,它由JSON构建(它只有名称和ID),称为“items”。我还有一个名为“selecteditem”的所选项目(它有项目的完整详细信息)的可观察对象。当您单击“项目”列表中的项目时,它应填充“selecteditem”,这将通过另一个JSON回复填充“itemdetails”以及完整详细信息,允许您编辑它们并保存更改。

进度: 单击网格工作正常,如果我单击供应商14,它将获得正确的VendorID并将其作为/ api / vendor / 14传递给查询字符串。

问题: 如何使用第二个ajax调用更新我的viewmodel的selecteditem部分(当你点击其中一个项目时触发)。

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>

1 个答案:

答案 0 :(得分:2)

看起来你的viewModels itemdetails的设置不正确。

而不是window.viewModel.itemdetails = ko.mapping.fromJS(data2);

使用window.viewModel.itemdetails(ko.mapping.fromJS(data2));