Basic Knockout JS mapping to a single JSON object

Question

I'm very new to knockout and am creating a jquery mobile app wanting to get the benefits of knockout. I have spent the last day bashing my head against the wall for a very simple problem.. I have since deleted the code and went with a manual binding by hand (thus almost defeating the purpose of using KO over jquery).. Anyway, if someone could show me how to change what I have to use the real power of KO then it would be a great point for me to build on. Any code examples I could find were always for much more complex problems than this (dealing 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":"[email protected]","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!

Nedi

Answer 1

Using of mapping plugin is very simple if you don't need any additional functions or computed for your view 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 fromJS function if data is JS object and fromJSON if it is JSON string. And make sure that you have the same property names in data-bind attributes and json.

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

Galan

Thats almost exactly what I was trying first time round.. The difference is you put the ko.applyBindings in the success method - I had it declared in the document.ready() function, resulting in my data not displaying. Thanks! – Nedi