Knockout is a standalone
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...
implementation of the
Model–View–ViewModel
Model–view–viewmodel (MVVM) is an architectural pattern in computer software that facilitates the separation of the development of the graphical user interface (GUI; the ''view'')—be it via a markup language or GUI code—from the developm ...
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
Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use the source code, design documents, or content of the product. The open-source model is a decentralized sof ...
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)
Example
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)
function ViewModel()
ko.applyBindings(new ViewModel());
References
*
*
External links
*
{{ECMAScript
Rich web application frameworks
Ajax (programming)
JavaScript libraries