fastbinder

Fastbinder

Fast and worry-free dynamic event binding.

Add and remove DOM elements dynamically without any additional event binding/unbinding steps. The only bound elements are window and document.body. Requires jQuery.

Currently the following attributes are supported:

• data-on-click
• data-on-mousedown
• data-on-mouseup
• data-on-hover
• data-on-keydown
• data-on-keyup
• data-on-change
• data-on-submit
• data-on-scroll

Install

bower install fastbinder

npm install fastbinder

Usage

// Initialize
jQuery.fastbinder();

// Initialize with options
jQuery.fastbinder({ hoverDelay: 250 });

// Set options later on:
jQuery.fastbinder.setOptions({ forceExternalLinks: false });

// Tear down:
jQuery.fastbinder.destroy();

Usage

<!-- Change Handler -->
<input type="text" data-on-change="MyLibrary.myChangeHandler" />

<!-- Click Handler -->
<a href="#" data-on-click="MyLibrary.myClickHandler">Execute myFunction on click</a>

<!-- Hover Handler -->
<div data-on-hover="MyLibrary.myHoverHandler"></a>

<!-- Scroll Handler -->
<div data-on-scroll="MyLibrary.myScrollHandler"></a>

<!-- Form submit handler -->
<form data-on-submit="MyLibrary.mySubmitHandler">
  <input type="text" data-on-keyup="MyLibrary.myKeyupHandler" data-on-keydown="" />
  <input type="submit" />
</form>

MyLibrary.myKeyupHandler = function (e) {
  // The jQuery event object is passed in:
  window.console.log(e, e.which);

  // `this` is bound to the DOMElement:
  var val = $(this).val();
  window.console.log(val);
};

Controller Scope

By using the data-controller attribute on either a parent element or the element itself, you can namespace a template block to a particular controller. For example, changing this input would execute the MyLibrary.myController.change function:

<div data-controller="MyLibrary.myController">
  <input type="text" data-on-change="change" />
</div>

Adding and Extending Bindings

For example, to add support for touch events:

jQuery.fastbinder.on({ name: 'touchstart', attribute: 'on-touchstart' });
jQuery.fastbinder.on({ name: 'touchend', attribute: 'on-touchend' });

Or to support both mouse and touch events with a single attribute:

jQuery.fastbinder.on({ name: 'mousedown touchstart', attribute: 'on-mousedown' });
jQuery.fastbinder.on({ name: 'mouseup touchend', attribute: 'on-mouseup' });

Running the Tests

First, install bower and npm dependencies:

npm install
bower install

npm test