Fast and worry-free dynamic event binding.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitattributes
.gitignore
.npmignore
.travis.yml
Gruntfile.js
LICENSE
README.md
bower.json
jquery.fastbinder.js
karma.conf.js
package.json
test.html

README.md

Fastbinder

Build Status

Fast, simple, leak-free event binding for your views.

Add and remove thousands of DOM elements dynamically without worrying about any additional event binding/unbinding. The only bound elements are window and document.body.

The following attributes are supported:

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

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();

// Example handler function:
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);
};
<!-- 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" />
  <input type="submit" />
</form>

Setting a 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>

You can also define an implied controller prefix:

$.fastbinder({
  controllerPrefix: 'App.Controller.',
});
<div data-controller="Things">
  <button data-on-click="clickHandler">Will execute App.Controller.Things.clickHandler</button>
</div>

Controller scopes can be nested, or overridden using a fully-qualified function name:

<div data-controller="Cars">
  <button data-on-click="clickHandler">Will execute Cars.clickHandler</button>
  <div data-controller="Boats">
    <button data-on-click="clickHandler">Will execute Boats.clickHandler</button>
    <button data-on-click="Planes.clickHandler">Will execute Planes.clickHandler</button>
  </div>
</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