Loading AI tools
JavaScript library From Wikipedia, the free encyclopedia
Knockout is a standalone JavaScript implementation of the Model–View–ViewModel pattern with templates. The underlying principles are therefore:
![]() | This article includes a list of general references, but it lacks sufficient corresponding inline citations. (June 2021) |
Original author(s) | Steve Sanderson |
---|---|
Initial release | July 5, 2010 |
Stable release | 3.5.1
/ November 5, 2019 |
Repository | Knockout Repository |
Written in | JavaScript |
Size | 59 KB minified / 283 KB (development mode) |
Type | JavaScript library |
License | MIT |
Website | knockoutjs |
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.
Knockout includes the following features:
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.
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:
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);
}
};
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.