1
我是整個前端客戶端腳本編寫場景的新手，在處理最近的項目時遇到了一些困難。我瀏覽過網站，找不到任何回答我的問題的東西。這裏可能有些東西，我沒有找到它，因爲我缺乏經驗，如果能提供這些資源的鏈接，它會很好。當使用KnockoutJS時，頁面加載時不會產生Ajax請求
我目前正在建立一個客戶端，使ajax調用我建立的跨域asp.net web api。我知道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>
}
已簡化爲得到它之前，我增加更多的功能，工作的緣故。
謝謝你的時間。