Question

我是整个前端客户端脚本场景的新手，在处理我最近的项目时遇到了一些困难。我查看了网站，找不到任何回答我问题的内容。这里可能有一些东西，我没有找到它，因为我的经验不足，如果有可能提供这些资源的链接会很好。

我目前正致力于构建一个客户端，该客户端对我构建的跨域asp.net web api进行ajax调用。我知道web api可以在提琴手中测试过。我还设法成功拨打点击事件。

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

为了在我添加更多功能之前使其正常工作，它已被简化。

感谢您的时间。

Answer 1

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

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

1 个答案: