Press "Enter" to skip to content

Simple DOM Elements Binding Tool Plugin | 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);

Bind Callback Or JS Class To DOM Elements, 👔 Necktie DOM binding tool Plugin/Github, assign callback to variable javascript, 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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.