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
            };
        };
    })

私のノックアウトjsビューモデルでは、これを行いたい:

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からの deferred を直接使用して、そこにノックアウトをバインドできます。

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