Knockout.js is an open source JavaScript library for dynamic HTML UIs using the Model-View-View Model (MVVM) pattern.
Knockout.js is an open source JavaScript library implementation of the Model-View-View Model (MVVM) UI pattern in JavaScript and HTML.
Knockout.js is a pure JavaScript library with no external dependencies. It is supported in all major browsers, IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile).
Knockout.js works with any web framework.
The key features of Knockout.js include:
- Free, open source (MIT license)
- Small & lightweight — 55kb minified
- Declarative Bindings: Easily associate DOM elements with model data using a concise, readable syntax.
- Two-way binding: When your view model's state changes, your UI updates automatically. When you change form element values, the view model's state updates automatically.
- Dependency Tracking: Implicitly set up chains of relationships between model data, to transform and combine it.
- Templating: Quickly generate sophisticated, nested UIs as a function of your model data.
- Components - 3.2.0+: Controls or Widgets made up of self-contained reusable chunks of code.
Helpful links
- Home page
- Tutorial
- Documentation
- Forum
- Source Code
- "Knock Me Out", a blog by one of Knockout's contributors
- Wiki - Plugins, Sample Bindings, and Best Practices
- Latest Stable Release - knockout-3.5.1.js
- Download & Installation Guide
- External links
Stack Snippet Starter Pack
HTML:
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
JavaScript:
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.pureComputed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth"));