Knockout JS

knockout-delegatedEvents is a Knockout.js plugin that allows you to add event delegation declaratively in your markup in a way that matches well with a normal Knockout application. This means adding an event handler on a parent element that can respond to events triggered by a child element and connect with a handler that lives on the view model. This is similar to using jQuery's on (previously live/delegate).

Tools required

The following are required in order to implement knockout.js in your web application

  1. Text Editor (Sublime Text, Visual Studio Code etc.)
  2. Knockout JavaScript file. (Version 3.2.0+)
  3. Some knowledge in DOM operations using JavaScript

Installation

  1. Create a folder for your web application
  2. Copy your knockout.js file to the folder
  3. Create a simple web page without any list data. (We will implement all lists using our knockout.js functionalities)

Parent Element

knockout-delegatedEvents adds a binding called delegatedHandler that you can place on an element to respond to events triggered by its child elements. This binding can go on the body or at a lower-level, as necessary. The binding expects either the name of a single event or an array of events that it should handle.
Single event:

Multiple event:

Child Elements

Suppose that we have a simple view model like:

The view model will be used to generate the children of the element.