Simple DOM Elements Binding Tool Plugin | Necktie

dom-elements-necktie

Necktie is a library that links your logic to elements of the Document Object Model in an easy way. Only contains ~ 3 KB (UMD, mini). The necktie is a DOM-binding JavaScript library that allows you to bind a callback function or a JavaScript class to DOM elements.

Necktie takes its powers from the capabilities of document.querySelector and MutationObserver. This tool allows you to record a function or class that will be called with a suitable element as an argument, even if it is dynamically created or removed.

It is powered by the MutationObserver API to monitor changes made to the DOM tree, which means the plugin works on any element even if it is dynamically created or removed.

alternative to bind javascript, bind javascript, javascript access variable in callback function, call apply bind in javascript mdn

How to make use of it:

1. Install and import the Necktie.

# Yarn
$ yarn add @lesniewski.pro/necktie

# NPM
$ npm i @lesniewski.pro/necktie
import { Necktie } from '@lesniewski.pro/necktie';

2. Or straight import the Necktie JavaScript library into the doc.

<script src="dist/necktie.umd.js"></script>

3. Initialize the Necktie and begin listening for DOM adjustments.

const tie = new Necktie();
tie.startListening();

4. Bind a callback to perform to DOM components

tie.bind('.element', (element) => {
  console.log(element);
  return (removedElement) => {
    console.log(removedElement);
  };
});

5. Bind a category to DOM components.

class myClass {
  constructor(element) {
    console.log("Binded to:", element);
    this._element = element;
    window.addEventListener("custom:addListItemClicked", this.createItem);
  }
  createItem = () => {
    const newItem = document.createElement("li");
    newItem.innerText = `Item no. ${this._element.childElementCount + 1}`;
    this._element.appendChild(newItem);
  };
  destroy() {
    window.removeEventListener("custom:addListItemClicked", this.createItem);
  }
}
tie.bindClass(".element", myClass);

6. Watch for attributes adjustments with the observeAttributes function.

tie.observeAttributes(true/false);

Components

Necktie class

MethodDescription
constructor(parent?: ParentNode): thisCreates a new Necktie instance. Optionally provide a custom parent node (defaults to the root document node).
  
bind(selector: string, callback: Callback): thisBinds a callback function with a given selector.
bindClass(selector: string, BindableComponent: Bindable): thisBinds a Bindable class with a given selector.
observeAttributes(isEnabled?: boolean): thisLooks for attributes changes, for example, class or data-*. Rebinds registered functions if necessary. WARNING! Use with caution, this may be expensive.
startListening(): thisRuns callbacks or Bindable classes on registered selectors and starts listening for DOM changes.
stopListening(): thisStops observing DOM changes.

Bindable class

MethodDescription
constructor(element?: Element): thisCreates a new Bindable instance.
  
destroy(removedElement?: Element): voidA clean-up method, is called when a DOM element has been removed.

Bind Callback Or JS Class To DOM Elements, 👔 Necktie DOM binding tool Plugin/Github, callback function in javascript, bind operator javascript, javascript dynamic binding


See Demo And Download

Official Website(leshniak): Click Here

This superior jQuery/javascript plugin is developed by leshniak. For extra Advanced Usage, please go to the official website.

Share