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: