Basic Knockout JS mapping to a single JSON object

Shorttylad picture Shorttylad · Nov 29, 2012 · Viewed 9.2k times · Source

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!

Answer

Artem Vyshniakov picture Artem Vyshniakov · Nov 29, 2012

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/