Basic JS knockout for a single JSON object

Question

I am very new to knockout and am creating a jquery mobile app that wants to get the benefits of a knockout. I spent the last day making my head against the wall for a very simple problem. Since then I deleted the code and went manually using manual control (thus almost defeating the goal of using KO over jquery). In any case, if someone can show me how to change what I need to use the real power of knockout, then it would be great for me to stop. Any code examples I could find were always for much more complex problems than this (with arrays, etc.).

My JSON:

{"id":9,"fullName":"John Doe","firstName":"John","lastName":"Doe","referenceNumber":"BUY-08","position":"Buyer","type":"Buyer","telephone":"028 82 240780","email":" [e-mail] ","departmentId":3,"departmentName":"DEPT B","country":"United Kingdom"} 

My 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> 

My 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 help is greatly appreciated, thanks!

Answer 1

Using the display plugin is very simple if you do not need any additional features or are not designed for your presentation model. You should just pass your JSON to ko.mapping.fromJS:

 var viewModel = {}; function success(data) { viewModel = ko.mapping.fromJS(data); ko.applyBindings(viewModel); } webAPICall("api/user/getcurrentuser", "GET", success); 

Use the fromJS function if the data is JS objects and fromJSON if it is a JSON string. And make sure you have the same property names in the data-bind and json attributes.

Here is a working example: http://jsfiddle.net/axrwkr/5t5fj/50/