https://github.com/nicbell/attach.js

:paperclip: A DOM instantiation API designed to tidy up and encapsulate attaching JavaScript to the page.
https://github.com/nicbell/attach.js

Last synced: about 2 months ago
JSON representation

:paperclip: A DOM instantiation API designed to tidy up and encapsulate attaching JavaScript to the page.

• Host: GitHub
• URL: https://github.com/nicbell/attach.js
• Owner: nicbell
• License: mit
• Created: 2013-05-22T16:27:51.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2024-01-03T20:44:03.000Z (9 months ago)
• Last Synced: 2024-07-17T06:03:49.896Z (2 months ago)
• Language: JavaScript
• Homepage: http://nicbell.github.io/attach.js/
• Size: 81.1 KB
• Stars: 19
• Watchers: 5
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Attach.js 

[![npm](https://img.shields.io/npm/v/attach.js?style=flat&logo=npm)](https://www.npmjs.com/package/attach.js)

 [![Build Status](https://github.com/nicbell/attach.js/actions/workflows/check.yml/badge.svg)](https://github.com/nicbell/attach.js/actions) [![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/attach.js?style=flat&color=pink)](https://www.npmjs.com/package/attach.js) ![Downloads](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fnicbell%2Fnpm-statistics%2Fmaster%2Fpackages%2Fattach.js.json&style=flat&logo=null&label=downloads&color=violet&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fattach.js)

Attach.js removes dependancy on messy CSS selectors when attaching JavaScript to the page. Attach.js also encapsulates all your DOM "attachments" so that they can easily be reattached when the page is dynamically updated (ie. via AJAX). 

I have written Attach.js in pure JavaScript but in the examples I have shown how to use it with jQuery and Mootools.

## The problem

Ever thought CSS selectors in your JavaScript were messy or wanted to reatttach JavaScript to the DOM after content was dynamically loaded?

```html

..

..

```

```javascript

$(document).ready(function(){

  $('.someSelector').pluginName();

  //or

  var x = new SomeThing($('.anotherSelector'));

});

```

Pretty messy, and what if the class name changes? 


## Usage

```html

..
 

..
 

..
 

```

```javascript

Attach.add('id',function(el){..}); //Add an attachment for id

Attach.add('id2',function(el){..}); //Add an attachment for id2

Attach.run(); //Attach to DOM

```


## Example

```html

..

..

```

```javascript

Attach.add('pluginName',function(el){

  $(el).pluginName();

});

Attach.add('SomeThing',function(el){

   new SomeThing($(el));

});


$(document).ready(function(){

  Attach.run();

});

```

## API

- `Attach.add(id, callback)` {Function} Adds callback for id (matches 'data-attach' value). The callback has one parameter 'el' (DOM element).

- `Attach.remove(id)` {Function} Removes callback for id.

- `Attach.run()` {Function} Queries DOM and runs callbacks for 'data-attach' values.

- `Attach.engine` {Object} Set this to replace the query engine an engine of your choice.

- `Attach.items` {Array} List of attachments.

## More detailed examples:

* [Attaching multiple plugins and classes to a single element](https://github.com/nicbell/attach.js/wiki/Attaching-multiple-plugins-and-classes-to-a-single-element).

* [Attaching plugins and classes with parameters](https://github.com/nicbell/attach.js/wiki/Attaching-plugins-and-classes-with-parameters).

* [Storing instance references](https://github.com/nicbell/attach.js/wiki/Storing-instance-references).

* [Reattaching after a DOM update](https://github.com/nicbell/attach.js/wiki/Reattaching-after-a-DOM-update).

* [Advanced Mootools example](https://github.com/nicbell/attach.js/wiki/Advanced-Mootools-example).

---

This project was inspired by ClientCide's Behavior project and DOM instantiation in Twitter Bootstrap.