전 프론트 엔드 클라이언트 스크립팅 씬을 처음 사용하고 가장 최근 프로젝트에서 작업 할 때 약간의 어려움이 있습니다. 나는 웹 사이트를 둘러 보았고 나의 질문에 대답 한 것을 찾을 수 없었다. 여기에 뭔가가있을 수 있습니다. 나는 경험이 없기 때문에 그것을 찾지 못했으며, 만약 당신이 그 자원에 대한 링크를 제공 할 수 있다면 좋을 것입니다.KnockoutJS를 사용할 때 페이지로드시 Ajax 요청이 발생하지 않습니다.
저는 현재 내가 작성한 교차 도메인 asp.net 웹 API에 대한 ajax 호출을 만드는 클라이언트를 만드는 중입니다. 나는 그것이 바이올린으로 테스트 되었기 때문에 웹 API가 작동한다는 것을 알고 있습니다. 또한 클릭 이벤트를 성공적으로 호출 할 수있었습니다.
문제는 페이지로드와 knockoutjs에서이 작업을 수행 할 수 없다는 것입니다. 나는 페이지가로드 될 때 데이터로 채워지는 간단한 목록을 만들려고했지만 페이지를로드하고 피들러를 확인하면 아약스 호출이 생성되지 않음을 알 수 있습니다. 이것은 아마도 페이지를로드 할 때 컨텐츠가 존재하지 않는 이유를 설명해줍니다. 모델을 볼 수있는 정적 데이터를 삽입하려고 시도 했으므로 바인딩이 작동하여 아약스 호출을 차단하는 것이있을 수 있습니다.
예제를 살펴본 결과 일부 코드가 작성되었습니다. 이 코드에는 아무런 문제가 보이지 않지만 경험이 없으므로 내가 뭔가를 놓치고있는 가능성이 있습니다. 모델 바인딩을 수행하는보다 효율적인 방법이있을 수도 있습니다. 그렇다면 경험이 많은 사람의 조언을 부탁드립니다.
코드는 다음과 같습니다 그것은 내가 더 많은 기능을 추가하기 전에 작업을 얻기 위해서 단순화 된
@{
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>
}
.
감사합니다.