Skip to content

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

License

Notifications You must be signed in to change notification settings

nicbell/attach.js

Repository files navigation

Attach.js

npm Build Status npm package minimized gzipped size Downloads

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?

<div class="someSelector">..</div>
<div class="anotherSelector">..</div>
$(document).ready(function(){
  $('.someSelector').pluginName();
  //or
  var x = new SomeThing($('.anotherSelector'));
});

Pretty messy, and what if the class name changes?

Usage

<div data-attach="id">..</div> <!-- Attachments matching id will be added to this element -->
<div data-attach="id2">..</div> <!-- Attachments matching id2 will be added to this element -->
<div data-attach="id id2">..</div> <!-- Attachments matching id and id2 will be added to this element -->
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

<div class="someSelector" data-attach="pluginName">..</div>
<div class="anotherSelector" data-attach="SomeThing">..</div>
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:


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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published