Recently delving into knockoutjs, I came across the Microsoft tutorial showcasing how to integrate knockoutjs with MVC Web API. The tutorial can be found at: https://www.asp.net/web-api/overview/data/using-web-api-with-entity-framework/part-8. In a particular step of the tutorial, it explains the process of assigning a "Book" object to an observable and then binding its properties to html. For instance, accessing the AuthorName property like this:
data-bind="text: detail().AuthorName"
The observable structure and ajax call are as follows:
self.detail = ko.observable();
self.getBookDetail = function (item) {
ajaxHelper(booksUri + item.Id, 'GET').done(function (data) {
self.detail(data);
});
}
function ajaxHelper(uri, method, data) {
self.error('');
return $.ajax({
type: method,
url: uri,
dataType: 'json',
contentType: 'application/json',
data: data ? JSON.stringify(data) : null
}).fail(function (jqXHR, textStatus, errorThrown) {
self.error(errorThrown);
});
}
A concern arises about accessing the AuthorName property from within javascript code. Attempting to access it using `self.detail().AuthorName` did not yield the expected result. Unsure if it's a syntax error or something more intricate.
self.detail().AuthorName
The complete source code for this sample project is available for download here: https://github.com/MikeWasson/BookService