1

私はフロントエンド クライアント スクリプト シーン全体に不慣れで、最近のプロジェクトに取り組んでいるときにいくつかの問題に遭遇しました。私はウェブサイトを見回しましたが、私の質問に答えるものは何も見つかりませんでした. ここに何かがあるかもしれませんが、経験が浅いために見つけられませんでした。もしあれば、それらのリソースへのリンクを提供していただければ幸いです。

私は現在、構築したクロスドメインasp.net Web APIにajax呼び出しを行うクライアントの構築に取り組んでいます。フィドラーでテストされているため、Web APIが機能することはわかっています。また、クリックイベントで正常に呼び出しを行うことができました。

問題は、ページの読み込みとノックアウトjsでこれを機能させることができないように見えることです。ページの読み込み時にデータが取り込まれる単純なリストを作成しようとしましたが、ページを読み込み、フィドラーをチェックすると、ajax 呼び出しが行われていないことがわかります。これは、ページを読み込んだときにコンテンツが表示されない理由を説明している可能性があります。モデルを表示するためにいくつかの静的データを挿入しようとしましたが、バインディングが機能したため、ajax 呼び出しをブロックする何かがある可能性があります。

私は例を見て、いくつかのコードをノックアップしました。コードに問題は見られませんが、経験が浅いため、何かが欠けている可能性があります。モデル バインディングを行うためのより効率的な方法もあるかもしれません。

コードは次のとおりです。

@{
ViewBag.Title = "KnockoutTesting";
}


<!-- MAIN -->
    <div id="main">
        <!-- wrapper-main -->
        <div class="wrapper">
            <ul data-bind="foreach: places">
                <li>
                    <span data-bind="text: title"></span>
                </li>
            </ul>
        </div>
    </div>

@section scripts {
<script type="text/javascript" src="../../Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../../Scripts/knockout-2.1.0.js"></script>

<script type="text/javascript">

    function PlacesViewModel() {
        var self = this;

        function Place(root, id, title, description, url, pub) {
            var self = this;

            self.id = id;
            self.title = ko.observable(title);
            self.description = ko.observable(description);
            self.url = ko.observable(url);
            self.pub = ko.observable(pub);

            self.remove = function () {
                root.sendDelete(self);
            };

            self.update = function (title, description, url, pub) {
                self.title(title);
                self.description(description);
                self.url(url);
                self.pub(pub);
            };

        };

        self.places = ko.observableArray();

        self.add = function (id, title, description, url, pub) {
            self.places.push(new Place(self, id, title, description, url, pub));
        };

        self.remove = function (id) {
            self.places.remove(function (place) { return place.id === id; });
        };

        self.update = function (id, title, description, url, pub) {
            var oldItem = ko.utils.arrayFirst(self.places(), function (i) { return i.id === id; });
            if (oldItem) {
                oldItem.update(title, description, url, pub);
            }
        };



        self.sendDelete = function (place) {
            $.ajax({
                url: "http://localhost:1357/api/places" + place.id,
                type: "DELETE"
            });
        }
    };

    $(function () {
        var viewModel = new PlacesViewModel();

        ko.applyBindings(viewModel);
        $JQuery.support.cors = true;
        $.get("http://localhost:1357/api/places", function (places) {
            $.each(places, function (idx, place) {
                viewModel.add(place.PlaceID, place.Title, place.Description, place.URL, place.Public);
            });
        }, "json");
    });

</script>
}

機能を追加する前に動作させるために単純化されています。

御時間ありがとうございます。

4

1 に答える 1

0

あなたの問題は Web API の実装にあると思います。クライアントとサーバーの両方が CORS をサポートする必要があります。Carlos の投稿によると、Web API はネイティブで CORS をサポートしていません。彼の投稿にはコード サンプルが含まれています。

于 2012-08-01T03:53:47.770 に答える