Custom bindings

We know what a binding is, it is everything we write inside the data-bind attribute. We have some built-in bindings. Click and value are two of them. But we can write our own custom bindings that extend the functionality of our application in a tidy way.

Writing a custom binding is very easy. It has a basic structure that we should always follow to begin with:

ko.bindingHandlers.yourBindingName = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called when the binding is first applied to an element
    // Set up any initial state, event handlers, etc. here
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called once when the binding is first applied to an element,
    // and again whenever any observables/computeds that are accessed change
    // Update the DOM element based on the supplied values here.
  }
};

Knockout has an internal object called bindingHandlers...