knockout.js
Demandes AJAX et liaison
Recherche…
Exemple de requête AJAX w / binding
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());
Notez que JQuery a été utilisé ( $.getJSON(...)
) pour effectuer la requête. vanilla JavaScript peut effectuer la même chose, mais avec plus de code.
"Loading section / notification" pendant la requête 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());
Notez que JQuery a été utilisé ($ .getJSON (...)) pour effectuer la requête. vanilla JavaScript peut effectuer la même chose, mais avec plus de code.
Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow