Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Object JavaScript - Knockout
<!DOCTYPE html>
<title>MVVM 1</title>
<!-- the view -->
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Age: <strong data-bind="text: age"></strong></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<p>Edit first name : <input data-bind="value: firstName" /></p>
<p>Edit last name: <input data-bind="value: lastName" /></p>
<p>Edit age: <input data-bind="value: age" /></p>
<script src="Scripts/knockout-2.2.1.debug.js"></script>
//The model defines the data for the object
var dataModel = {
firstName: "Hello",
lastName: "There",
age: 23
// viewmodel defines behavior
function viewModel() {
var self = this;
self.firstName = ko.observable(dataModel.firstName);
self.lastName = ko.observable(dataModel.lastName);
self.age = ko.observable(dataModel.age);
// add computed field
self.fullName = ko.computed(function () {
return self.firstName() + " " + self.lastName();
// Activates knockout.js and binds the viewModel to the view
ko.applyBindings(new viewModel());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment