1

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

我目前正在构建一个客户端，它可以对我构建的跨域 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>
}

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

谢谢你的时间。

4

1 回答 1

0

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

于 2012-08-01T03:53:47.770 回答