0

我正在使用身份验证进行异步跨域调用。

当我通过身份验证后，我使用通用 get 方法检索真实的应用程序数据：

define(['jquery'], function ($) {
    return {
        get: function (url, data) {

            // Call to authenticate before retrieve data
            $.ajax({
                type: 'POST',
                url: 'root/authentication',
                data: { user: root: password: root },
                dataType: 'json',
                xhrFields: {
                    withCredentials: true
                },
                complete: function (response) {

                    // Call to retrieve application data
                    $.ajax({
                        beforeSend: function (xhr) {
                            xhr.withCredentials = true;
                        },
                        type: 'GET',
                        url: root + url,
                        xhrFields: {
                            withCredentials: true
                        },
                        async: true,
                        dataType: 'json',
                        crossDomain: true
                    });
                }
            });
        }
    };
});

上述数据调用由另一个非通用代码调用：

define(['cors'],
    function(cors) {
        return function CustomerService() {            
            function getCustomers() {
                return cors.get('/customers');
            }
            return {
                getCustomers: getCustomers
            };
        };
    })

在我的 knockoutjs 视图模型中，我想这样做：

当进行 asyc 调用时，执行 renderCustomers 函数并更新 UI。

 $.when(customerService.getCustomers())
            .done(renderCustomers)
            .fail();


        function renderCustomers(customers) {

            // Add data to knockout observables
        }

为了让我的客户进入 renderCustomers 函数，我需要做些什么改变？

现在客户是未定义的，我猜那是因为我的 ajax 调用没有正确设置承诺。

4

1 回答 1

1

在您的第一个片段中，您的 Ajax 调用不会对成功的客户数据做任何事情。尝试这个：

define(['jquery'], function ($) {
    return {
        get: function (url, data) {
                var result = $.Deferred();  // create a deferred object to return
            $.ajax({
                type: "POST",
                url: 'root/authentication',   // you had a typo here
                data: { user: root: password: root },
                dataType: 'json',
                xhrFields: {
                    withCredentials: true
                },
                complete: function (response) {
                    // Call to retrieve application data
                    $.ajax({
                        beforeSend: function (xhr) {
                            xhr.withCredentials = true;
                        },
                        type: "GET",
                        url: root + url,
                        xhrFields: {
                            withCredentials: true
                        },
                        async: true,
                        dataType: 'json',
                        crossDomain: true
                    }).done(function(responseData){
                            // resolve the manually created deferred object, and send it the customer data
                        result.resolve(responseData);
                    });
                }
            });
            return result; // return your deferred object
        }
    };
});

请注意，在 ajax 上调用“完成”与调用“成功”相同。通过返回 Deferred，您将能够使用 cors.getCustomers() 作为 deferred 本身。

您可以重构最终代码段以删除“ when ”调用并直接使用getCustomers中的延迟并在那里绑定您的淘汰赛：

customerService
    .getCustomers()  // this returns an deferred now so you can add done and fail events
  .done(function(customers) {

        // Add data to knockout observables
        var elem = document.getElementById('myelement');
        ko.applyBindings(customers,elem);
    });
于 2013-07-09T13:31:20.663 回答