Getting started with MooTools Behavior.js

A simple tutorial that explains the steps to get you started with Behavior.js

MooTools offers an elegant solution to dealing with messy, unusable JavaScript code that is used to build simple, disposable UI effects and elements, that should normally be abstracted from your application code, with the use of a library called Behavior.js. The library contains two main tools: Behaviour which is used for mapping layout elements to classes (plugins) and Delegator which is used to relate the options identified in HTML elements to predefined, reusable filters (subroutines).

This article will go through the steps involved with getting this awesome plugin working with your application.

Last Updated

This page was last updated on December 24rd 2011 and was first published on May 9th 2012

In a Nutshell

Behavior scans the page looking for any elements that contain the data-behavior attribute and then it will fire the assigned filter for any of the class(es) defined within the attribute value. This is what it looks like:

<a href="#" data-behavior="Tips" data-tip-options="{ 'someProperty' : 'someValue' }">
    Hover Here!
</a>

<script type="text/javascript">
Behavior.addGlobalFilter('Tips', {
  setup : function(element, api) {
    var options = {
       someProperty : api.get('someProperty');
    };
    new Tips(element,options);
  }
});

window.addEvent('domready',function() {
    Behavior.apply(document.body);
});
</script>

In this example, Behavior will scan the page (once the Behavior.attach() method is fired) and then look for any elements that match the selector (data-behavior=”Tip”) and then will append the options fetched from data-tip-options and built the api variable from that. It is up to you as to how you wish to instantiate the plugin (or perform a series of operations).

Delegator is pretty similar. It too looks for an attribute selector (data-trigger=”..”) and applies the associated options to the function call. The function call is registered with the Delegator:

<div class="divver">
    <a href="#" data-trigger="HideParent" data-hideparent-options="{'target':'.divver'}">
        Hide
    </a>
</div>

<script type="text/javascript">
Delegator.register('click', 'HideParent', function(event, element, api){
    event.preventDefault();
    var selector = api.get('target') || null;
    element.getParent(selector).hide();
});

window.addEvent('domready',function() {
    Delegator.attach(document.body);
});
</script>

The code is here pretty straightforward and it follows the flow of the Behavior example.

How to set this up

First you’ll need to clone the Git repository or download the source. Next extract all the files into a folder accessible within your web application. Include the following files (in the following order):

  1. ./Source/Element.Data.js
  2. ./Source/BehaviorAPI.js
  3. ./Source/Behavior.js
  4. ./Source/Behavior.Startup.js
  5. ./Source/Delegator.js

Next, define the filters that you want for your behavior operations with the following code:

Behavior.addGlobalFilter('Tips', {

  defaults : {
     //the default hash of items that will be appended to the api hash
  },

  setup : function(element, api) {
     //this is what happens when it is scanned
  }

});

Then register the Delegator events for the items that you wish to apply delegation operations on:

//setup the event
var evType = 'click'; //this can be any event for a DOM element
var trigger = 'TriggerName'; //this is the trigger defined in the data-trigger attribute

Delegator.register(evType, trigger, function(event, element, api){

    //this function is run when the event is fired
    //the api variable is the options hash of data-{trigger}-options attribute options

});

Once all the filters and delegation callbacks have been created, now any HTML element that contains the data-behavior or data-trigger attributes that match a behavior filter or delegation registration function will be ready. They won’t fire automatically, so you’ll need to define a run method:

window.addEvent('domready',function() {
  new Behavior().apply(document.body);
  new Delegator().attach(document.body);
});

Anything else?

Not so much. This toolkit is really sweet. Once you start using it you’ll see how the majority of your page or element class-specific code will trim itself down. The UI interactivity can be fully abstracted from the application core. I will blog more and more about this later on once I start to use the library within my own projects.

No Comments »

Add Your Comment