Knockout (web framework)

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)

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.

ViewModel (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

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); } };