knockout.js AJAX requests and binding Sample AJAX request w/ binding
Example
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());
Note that JQuery was used ($.getJSON(...)) to perform the request. vanilla JavaScript can perform the same, albeit with more code.
