Knockout (web framework)

---

title: "Knockout (web framework)" type: doc version: 1 created: 2026-02-28 author: "Wikipedia contributors" status: active scope: public tags: ["rich-web-application-frameworks", "ajax-(programming)", "javascript-libraries", "javascript-web-frameworks", "web-frameworks"] description: "JavaScript library" topic_path: "technology/web" source: "https://en.wikipedia.org/wiki/Knockout_(web_framework)" license: "CC BY-SA 4.0" wikipedia_page_id: 0 wikipedia_revision_id: 0

::summary JavaScript library ::

::data[format=table title="Infobox software"]

Field	Value
name	Knockout
author	Steve Sanderson
released
latest release version	3.5.1
latest release date
repo
programming language	JavaScript
size	59 KB minified / 283 KB (development mode)
genre	JavaScript library
license	MIT
website
::

| name = Knockout | author = Steve Sanderson | developer = | released = | latest release version = 3.5.1 | latest release date = | repo = | programming language = JavaScript | size = 59 KB minified / 283 KB (development mode) | genre = JavaScript library | license = MIT | website = Knockout is a standalone JavaScript implementation of the Model–View–ViewModel pattern with templates. The underlying principles are therefore:

• a clear separation between domain data, view components and data to be displayed
• the presence of a clearly defined layer of specialized code to manage the relationships between the view components

The latter leverages the native event management features of the JavaScript language.

These features streamline and simplify the specification of complex relationships between view components, which in turn make the display more responsive and the user experience richer.

Knockout was developed and is maintained as an open source project by Steve Sanderson.

Features

Knockout includes the following features:

• Declarative bindings
• Automatic UI refresh (when the data model's state changes, the UI updates automatically)
• Dependency tracking Templating (contains a dedicated template engine, but other templating engines can be used)

Examples

1. In this example, two text boxes are bound to observable variables on a data model. The "full name" display is bound to a dependent observable, whose value is computed in terms of the observables. When either text box is edited, the "full name" display is automatically updated, with no explicit event handling.

View Model (JavaScript)

::code[lang=javascript] function ViewModel() { this.firstName = ko.observable(""); this.lastName = ko.observable("");

this.fullName = ko.computed(
    function() { return this.firstName() + " " + this.lastName(); }, 
    this);

}

ko.applyBindings(new ViewModel()); ::

2. Creating Custom Binding Handlers in KnockoutJS

Use the ko.bindingHandlers object to specify your custom binding’s name and create an init or update function when creating a custom binding handler. The init function is called when the binding has been applied to an element, perfect for onetime initialization. Whenever the bound observable changes, an update function is called that allows you to react to changing data.

Here’s a simple example of a custom binding handler that applies a jQuery UI datepicker to an input element:

Custom Binding Handler

::code[lang=javascript] ko.bindingHandlers.datepicker = { init: function(element, valueAccessor) { $(element).datepicker({ onSelect: function(date) { var observable = valueAccessor(); observable(date); } }); }, update: function(element, valueAccessor) { var value = ko.unwrap(valueAccessor()); $(element).datepicker("setDate", value); } }; ::

References

::callout[type=info title="Wikipedia Source"] This article was imported from Wikipedia and is available under the Creative Commons Attribution-ShareAlike 4.0 License. Content has been adapted to SurfDoc format. Original contributors can be found on the article history page. ::