As a newbie to knockout and in the process of creating a jquery mobile app, I'm eager to harness the benefits of knockout. After struggling with a simple issue for a day, I resorted to manually binding code by hand, almost negating the use of KO over jquery. If anyone can guide me on how to leverage the true power of KO, it would be a turning point for me to progress. Most examples I found online were too complex (dealing with arrays, etc.)
The JSON data:
{"id":9,"fullName":"John Doe","firstName":"John","lastName":"Doe","referenceNumber":"BUY-08","position":"Buyer","type":"Buyer","telephone":"028 82 240780","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c311c3931...">[email protected]</a>","departmentId":3,"departmentName":"DEPT B","country":"United Kingdom"}
The HTML:
<div>
Full Name: <input data-bind="value: fullName" disabled="disabled"/> <br />
Ref: <input data-bind="value: reference" disabled="disabled"/> <br />
Position: <input data-bind="value: position" disabled="disabled"/> <br />
Email: <input data-bind="value: email" disabled="disabled"/> <br />
Dept: <input data-bind="value: departmentName" disabled="disabled"/> <br />
Country: <input data-bind="value: country" disabled="disabled"/> <br />
</div>
The Javascript:
$(document).ready(function () {
function DetailsViewModel() {
var self = this;
self.fullName = ko.observable("");
self.reference = ko.observable("");
self.email = ko.observable("");
self.position = ko.observable("");
self.departmentName = ko.observable("");
self.country = ko.observable("");
var success = function (data) {
self.fullName(data.fullName);
self.reference(data.referenceNumber);
self.email(data.email);
self.position(data.position);
self.departmentName(data.departmentName);
self.country(data.country);
$.mobile.loading('hide');
};
webAPICall("api/user/getcurrentuser",
"GET", success); // simple wrapper I'm using for ajax calls
}
ko.applyBindings(new DetailsViewModel());
});
Any guidance or assistance is highly appreciated. Thank you!