Edit in JSFiddle

var person = {
        "id": 10,
        "name": "Ravi",
        "designation": "Software Engineer"
    };

    var personVM = function () {
        var self = this;
        self.id = ko.observable();
        self.name = ko.observable();
        self.designation = ko.observable();
    }

    $(function () {
        var personVMObject = new personVM();
        personVMObject.id(person.id)
                      .name(person.name)
                      .designation(person.designation);
        ko.applyBindings(personVMObject);
    });
<table>
    <tr>
        <td>ID: </td>
        <td>
            <span data-bind="text: id" />
        </td>
    </tr>
    <tr>
        <td>Name: </td>
        <td>
            <input type="text" data-bind="value: name" />
        </td>
    </tr>
    <tr>
        <td>Designation: </td>
        <td>
            <input data-bind="value: designation" />
        </td>
    </tr>
</table>
<br />
<br />
<p>
    Name of the person: <span data-bind="text: name"></span>
</p>
<p>
    Designation of the person: <span data-bind="text: designation" />
</p>

              
            
          
            
              

External resources loaded into this fiddle: