使用 KnockoutJS 时不会在页面加载时发出 Ajax 请求答案

【问题标题】：Ajax requests are not made on page load when using KnockoutJS使用 KnockoutJS 时不会在页面加载时发出 Ajax 请求
【发布时间】：2012-07-29 06:55:21
【问题描述】：

我是整个前端客户端脚本领域的新手，在处理我最近的项目时遇到了一些困难。我浏览了该网站，找不到任何可以回答我问题的内容。这里可能有一些东西，但由于我没有经验，我只是没有找到它，如果你能提供这些资源的链接，那就太好了。

我目前正在构建一个客户端，该客户端可以对我构建的跨域 asp.net web api 进行 ajax 调用。我知道 web api 可以在 fiddler 中进行测试。我还成功地在点击事件上进行了调用。

问题是我似乎无法在页面加载和使用 knockoutjs 时使其正常工作。我试图做一个简单的列表，在页面加载时填充数据，但是当我加载页面并检查提琴手时，我可以看到没有进行 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>
}

为了在我添加更多功能之前让它工作，它已经过简化。

感谢您的宝贵时间。

【问题讨论】：

标签： ajax json knockout.js asp.net-web-api cors

【解决方案1】：

我相信您的问题可能在于您的 Web API 实现。客户端和服务器都必须支持 CORS。根据 Carlos 的post，Web API 本身并不支持 CORS。他的帖子包含一个代码示例。

【讨论】：