Wednesday, December 7th, 2005

Beautiful JavaScript-Powered Pages with Behaviour

Category: Editorial

Behaviour.js is a nice way of abstracting your JavaScript code out of the HTML.

David Goodlad has taken this further to build beautiful javascript powered pages:

The problem that I ran into, though, was that I was duplicating many of my behavior definitions between pages. Right now I’m using mostly scaffolded controllers and views, with your typical list/new/edit/destroy actions. The list views are all fairly similar; we’ve got a list of items and actions that can be performed on them. Each controller ended up with a very similar set of behaviors defined for the list, with minor differences to account for the different types and quantities of data being presented.

The solution, of course, was to factor out the common code. Thanks to the nice helpers in Prototype, I was able to come up with some nice clean syntax for what I termed ‘Standard Behaviors’. For example, if I want a destroy action link to work via AJAX, I just call the following in an included JS script:

new StandardBehavior.DestroyItem('recipes');

To define these standard behaviors, I use the following:

StandardBehavior = function() {};
StandardBehavior.prototype = {
   initialize : function(container_id) {
      this.container_id = container_id;
      this.opt = arguments[1] || {};

      this.register();
   },

   register : function() {
      Behavior.register(this.css_selector(),
                        this.get_behavior(),
                        $(this.container_id));
   },

   css_selector : function() {
      return "#" + this.container_id + " ." + this.action_name;
   }
}

StandardBehavior.DestroyItem = Class.create();
StandardBehavior.DestroyItem.prototype = 
  Object.extend(new StandardBehavior(), {
   action_name : 'destroy',

   get_behavior : function() {
      return function(el) {
         el.onclick = function() {
            //do ajax here

            return false;
         }
      }
   }
});

Beautiful.

Posted by Dion Almaer at 10:43 am
7 Comments

+++--
3.9 rating from 14 votes

7 Comments »

Comments feed

You seem to be having an overflow problem, and as such you’re clipping quite a bit of information.

Comment by CM Harrington — December 7, 2005

Thanks for the link :) I plan on posting some more detailed info about this in the very near future.

Comment by David Goodlad — December 7, 2005

CM: thanks for the heads up, I’ve fixed that.

Comment by Rob Sanheim — December 7, 2005

Ah, much better!

Thanks much for this. As a person who always tries to separate functions (MVC, etc), I have found Behaviour to be a wonderful addition to my toolbox.

Comment by CM Harrington — December 7, 2005

I’ve just posted my follow-up article, going into more detail about my techniques. I’ve provided some solid examples, and the whole article should make for a much easier read now :)

http://david.goodlad.ca/articles/2005/12/08/standardizing-js-behaviors

Comment by David Goodlad — December 8, 2005

I found css-like syntax is more clear,
see —
JavaScript Event Sheets
(http://www.kryogenix.org/code/browser/jses/)

and —
Behavioral Extensions to CSS
(http://www.w3.org/TR/becss)

Comment by rvm — December 8, 2005

@rvm: Interesting, I’d never seen those techniques before! I’ll have to play with them to see if I like how they work, but I can definitely see how they might fit into the approach that I already use. Thanks for pointing those out!

Comment by David Goodlad — December 8, 2005

Leave a comment

You must be logged in to post a comment.