knockout.js
AJAX 요청 및 바인딩
수색…
바인딩을 사용한 샘플 AJAX 요청
Page.html
<div data-bind="foreach: blogs">
<br />
<span data-bind="text: entryPostedDate"></span>
<br />
<h3>
<a data-bind="attr: { href: blogEntryLink }, text: title"></a>
</h3>
<br /><br />
<span data-bind="html: body"></span>
<br />
<hr />
<br />
</div>
<!--- include knockout and dependencies (Jquery) --->
<script type="text/javascript" src="blog.js"></script>
blog.js
function vm() {
var self = this;
// Properties
self.blogs = ko.observableArray([]);
// consists of entryPostedDate, blogEntryLink, title, body
var blogApi = "/api/blog";
// Load data
$.getJSON(blogApi)
.success(function (data) {
self.blogs(data);
});
}
ko.applyBindings(new vm());
JQuery ( $.getJSON(...)
)가 요청을 수행하는 데 사용되었습니다. 바닐라 자바 스크립트는 더 많은 코드를 사용하여 동일하게 수행 할 수 있습니다.
AJAX 요청 중 "로딩 섹션 / 알림"
Blog.html
<div data-bind="visible: isLoading()">
Loading...
</div>
<div data-bind="visible: !isLoading(), foreach: blogs">
<br />
<span data-bind="text: entryPostedDate"></span>
<br />
<h3>
<a data-bind="attr: { href: blogEntryLink }, text: title"></a>
</h3>
<br /><br />
<span data-bind="html: body"></span>
<br />
<hr />
<br />
</div>
<!--- include knockout and dependencies (JQuery) --->
<script type="text/javascript" src="blog.js"></script>
blog.js
function vm() {
var self = this;
// Properties
self.blogs = ko.observableArray([]);
self.isLoading = ko.observable(true);
// consists of entryPostedDate, blogEntryLink, title, body
var blogApi = "/api/blog";
// Load data
$.getJSON(blogApi)
.success(function (data) {
self.blogs(data);
})
.complete(function () {
self.isLoading(false); // on complete, set loading to false, which will hide "Loading..." and show the content.
});
}
ko.applyBindings(new vm());
JQuery ($ .getJSON (...) $)가 요청을 수행하는 데 사용되었습니다. 바닐라 자바 스크립트는 더 많은 코드를 사용하여 동일하게 수행 할 수 있습니다.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow