2

クロスドメイン コールを含む Web プロジェクトに取り組んでおり、Knockout.js と ASP.NET Web Api を使用することにしました。VS 2012 でシングル ページ アプリケーション テンプレートを使用し、Knockout クラスをそのまま実装しました。同じドメインから JSON 呼び出しを行うとページはうまく機能しますが、リモート サーバーから JSONP を使用しようとすると、ノックアウトがデータをバインドしていないようです。JSONP 呼び出し中にリモートから受信した JSON データを確認できますが、ノックアウトはデータをバインドできません。

ここに私の JavaScript ViewModel クラスがあります:

window.storyApp.storyListViewModel = (function (ko, datacontext) {
    //Data
    var self = this;
    self.storyLists = ko.observableArray();
    self.selectedStory = ko.observable();   
    self.error = ko.observable();

    //Operations
    //Load initial state from the server, convert it to Story instances, then populate self

    datacontext.getStoryLists(storyLists, error); // load update stories      

    self.selectStory = function (s) {
        selectedStory(s); $("#showStoryItem").click(); window.scrollTo(0, 0);
        storyItem = s;        
    }
    //append id to the hash for navigating to anchor tag
    self.backToStory = function () {        
        window.location.hash = storyItem.id;       
    }

    self.loadStories = function () {
        datacontext.getStoryLists(storyLists, error); // load update stories
    }

    return {
        storyLists: self.storyLists,
        error: self.error,        
        selectStory: self.selectStory
    };
})(ko, storyApp.datacontext);

// Initiate the Knockout bindings
ko.applyBindings(window.storyApp.storyListViewModel);

そして、以下のような私の DataContext クラス:

window.storyApp = window.storyApp || {};

window.storyApp.datacontext = (function (ko) {

    var datacontext = {
        getStoryLists: getStoryLists
    };

    return datacontext;

    function getStoryLists(storyListsObservable, errorObservable) {
        return ajaxRequest("get", storyListUrl())
            .done(getSucceeded)
            .fail(getFailed);

        function getSucceeded(data) {
            var mappedStoryLists = $.map(data, function (list) { return new createStoryList(list); });
            storyListsObservable(mappedStoryLists);
        }

        function getFailed() {
            errorObservable("Error retrieving stories lists.");
        }

        function createStoryList(data) {
            return new datacontext.StoryList(data); // TodoList is injected by model.js
        }
    }

    // Private
    function clearErrorMessage(entity) {
        entity.ErrorMessage(null);
    }

    function ajaxRequest(type, url, data) { // Ajax helper
        var options = {
            dataType: "JSONP",
            contentType: "application/json",
            cache: false,
            type: type,
            data: ko.toJSON(data)
        };
        return $.ajax(url, options);
    }

    // routes
    function storyListUrl(id) {
        return "http://secure.regis.edu/insite_webapi/api/story/" + (id || "");
    }
})(ko);

このページ: http://insite.regis.edu/insite/index.htmlは、secure.regis.edu へのクロスドメイン呼び出しを行いますが、機能していません。ただし、secure.regis.eduinsite/index.html の同じページで JSON 呼び出しを行うと問題なく動作します。

私は何を間違っていますか？どんな助けでも大歓迎です。

4

2 に答える 2

2

助けてくれてありがとう。

https://github.com/WebApiContrib/WebApiContrib.Formatting.Jsonpで説明されているようにWebApiプロジェクトにWebApiContrib.Formatting.Jsonpクラスを追加し、以下のようにjQuery Ajaxヘルパークラスにわずかな変更を加えることで、問題を解決できます。 ：

function ajaxRequest(type, url, data, callbackWrapper) { // Ajax helper
    var options = {
        dataType: "jsonp",
        crossDomain : true,
        type: type,
        jsonp: "callback",
        jsonpCallback: callbackWrapper,
        data: ko.toJSON(data)
    };   

    return $.ajax(url, options);
}

すべてが魅力として機能しました。

于 2013-02-04T18:05:09.153 に答える
1

次のことをお勧めします。

シンプルなアラート スタイルの成功およびエラー コールバックを使用して AJAX 呼び出しを行う単純な例 (ノックアウトなし) を作成します。クロスドメインの場合にエラーがスローされることを確認します。

次のリンクを確認してください: parsererror after jQuery.ajax request with jsonp content type。これだけでは不十分な場合は、Web (および StackOverflow) で jQuery JSONP の解析エラーとコールバックに関する情報を検索してください。

それでも問題が解決せず、#1 を実行して期待どおりの結果が得られた場合は、単純化した例でこの投稿を書き直し、Knockout への参照 (タイトル、タグ) を削除します。私は Knockout については知っていますが、JSONP については知りません。また、JSONP を知っている人々はこれに触れていないようです。そのため、この質問は間違った対象者に届いていると思います。タイトルとタグを変更して JSONP/クロスドメインの側面を強調すると、必要な助けが得られる場合があります。

于 2013-01-31T06:06:37.603 に答える