A Nest for UJS
I have had a bit of a thing for UJS for the past couple years now. It started first with writing standards based semantic markup. Reading Dan
Cederholm Bullet Proof Web Design gave me an appreciation for well crafted markup and style. After creating such well formed markup, it seemed sacrilegious to litter my page with obtrusive bindings.
Now UJS is nothing new, and with Rails 3 it will become more widely adopted… at least with the rails folks. While I have taken an in-depth look into Rails 3 js helpers, what I have learned seems
to tickle my fancy a bit. Prior to Rails 3 I relied on approach which I may continue to use. Back in 2009 Sam Stephenson created sprockets a rails library that
preprocesses and concatenates JavaScript source files. I found it helpful in that it allowed your application specific javascript to reside in your app directory and javascript plugins and libraries would rest
with in the vendor directory. While in production sprockets would take all the various application specific javascript and plugins and concatenate them into a single file, speeding page load and reducing
http requests. The added benefit I found over using rails built-in caching convention was the organization of files.
Some time back I began to get a little overboard on number of elements which contained unobtrusive event bindings. Using jQuery’s live event I would list out all the class selectors and their matching
functions or directly bind to the function. I had no real prescribe way of organizing and creating new events. After a while I did not like the way my js code read and found it easier to only have one
click event which would then ask the element what to do.
I created an object called Behaviors which when invoked by a click event would match a method with in the Behaviors object.
// Single click event
$('.behavior').live("click",function(){ Behaviors.init($(this)); return false })
var Behaviors={
init:function(el){
if(el){
this.el=el;
method=this.el.attr('class').split(' ')
$.each(method,function(i,k){
// cycle through slector list to find a matching method
try{ Behaviors[k]() } catch(err) { }
})
return false;
}
}
//link
<%= link_to "My Event", my_event_path, :class => 'behavior my_event' %>
// Now I can skip the step of registering each event, and jump to writing the coupled js code
Behaviors.my_event = function(){
alert('This is my click event....')
}
Contained with in the app / Javascript directory created by sprockets I would create a behaviors directory to host init method. In an effort to better couple the view with its corresponding rails action, I would create
a javascript file named after related the controller. I found it much easier to find events this way using TextMate go to file will retrieve both the controller and related javascript files.
I am quite certain this or something similar has been done by others before in the past. None the less I felt its something worth sharing especially for those who are not ready to make the rails 3 upgrade.