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
| Method | Description |
|---|---|
constructor(parent?: ParentNode): this | Creates a new Necktie instance. Optionally provide a custom parent node (defaults to the root document node). |
bind(selector: string, callback: Callback): this | Binds a callback function with a given selector. |
bindClass(selector: string, BindableComponent: Bindable): this | Binds a Bindable class with a given selector. |
observeAttributes(isEnabled?: boolean): this | Looks for attributes changes, for example, class or data-*. Rebinds registered functions if necessary. WARNING! Use with caution, this may be expensive. |
startListening(): this | Runs callbacks or Bindable classes on registered selectors and starts listening for DOM changes. |
stopListening(): this | Stops observing DOM changes. |
Bindable class
| Method | Description |
|---|---|
constructor(element?: Element): this | Creates a new Bindable instance. |
destroy(removedElement?: Element): void | A 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.