knockout.js
Solicitudes y vinculación de AJAX.
Buscar..
Muestra de solicitud AJAX con enlace
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());
Tenga en cuenta que se usó JQuery ( $.getJSON(...)
) para realizar la solicitud. vainilla JavaScript puede realizar lo mismo, aunque con más código.
"Cargando sección / notificación" durante la solicitud 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());
Tenga en cuenta que se usó JQuery ($ .getJSON (...)) para realizar la solicitud. vainilla JavaScript puede realizar lo mismo, aunque con más código.
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow