Knockout separate view model creation and initialization

by apuchkov

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<p data-bind="text:name"></p>
<p data-bind="text:username"></p>
<p data-bind="text:gender"></p>
<p data-bind="text:email"></p>
<p data-bind="text:img"></p>

JavaScript

var data = {
    "me": {
        "username": "john",
            "email": "[email protected]",
            "name": "John Doe",
            "gender": "male",
            "img": "profile_img_john.jpg"
    }
}

var User = function (data) {
    this.name = ko.observable();
    this.username = ko.observable();
    this.gender = ko.observable();
    this.email = ko.observable();
    this.img = ko.observable();

    this.update(data);
};

ko.utils.extend(User.prototype, {
    update: function (data) {
        this.name(data.name || "");
        this.username(data.username || "");
        this.gender(data.gender || "");
        this.email(data.email || "");
        this.img(data.img || "default-image-url.png");
    }
});

//firstly create viewmodel without any data
var user = new User({});
ko.applyBindings(user);

//then set data later 
user.update(data.me);