One of the good parts of Ruby on Rails framework it is it’s helpers that come bundled in. For example Ruby on Rails has a bunch of javascript helpers (either Prototype or Jrails-Jquery) that speeds up Ruby on Rails development by a large margin. Although this is a nice feature, it’s current implementation in Rails 2.3 and previous versions is somewhat controversial.

For example, using popular Ruby on Rails link_to_function is super easy and fast (Rails is doing all the lifting for you) but just turn off your Javascript and load your Ruby on Rails application page with Javascript turned off and the following content:

link_to_function 'hey, where did my Javascript go?', 'alert(" Boo ")

to see that a link fails silently. In my Ruby on Rails development career I’ve heard voices that “if user has javascript disabled then **** him!”. Well… no. That is not a good approach. As a Ruby on Rails developer you need to take into consideration, Javascript could be unavailable because the user or user’s system administrator disabled it, an unexpected JS error occurred (por instance a developer bug/error), or the user has a poor internet connection (if he is accessing the Net from mobile device or airport).

So you shouldn’t be surprised that you won’t find helpers like link_to_function in Ruby on Rails 3.0 framework version anymore. So… how to roll without link_to_function? As usually, there are several ways, all depends on an approach a Ruby on Rails developer takes.

Most clean sollution is to use HTML5 data attributes. Here is an example, typical for Ruby on Rails application:

<a href="/articles/1" data-remote="true" data-method="delete">Destroy</a>

This is unobtrusive, although not degradable (you may use “button_to” in your Ruby on Rails application for this)
But HTML5 is kinda the ‘future’ at the moment in Ruby on Rails and in general web development.

Well, you could use class names/CSS for utilizing UJS approach, like this:

<a href="/articles/1">Destroy</a>

and then, Javascript ( Jquery) method that handles it:

$('a.remote').click( /* click handler */ )
But using this technique you’ll quickly notice that your CSS files become more and more cluttered with different classes for different javascript handlers in your Ruby on Rails application. Not so good, right?

So, another option for your Ruby on Rails project you are developing would be to take following approach:

<%= link_to "Add a tag to article", "#", "data-behaviors" => "add-tag" %>
And then in your Javascript driver, register a calback for this named behaviour:

Behaviors.add("click", "add-tag", function(element) {
// do stuff here...
});
The result of this approach is Unobtrusive Javascript that doesn’t hide the relationship between the markup and the code as it is in other UJS approaches in Ruby on Rails 3.

Here you can easily search for all elements in the views that behave like “add-tag”, and given a behavior name (like “add-tag”), you can quickly find the code that gets executed for it. Good thing is, that elements can have multiple behaviors, too: you need to specify a list of behavior names in the “data-behaviors” attribute.

You wouldn’t be surprised if I told you it isn’t an ideal solution for Ruby on Rails application architecture design?
Limitaitons can be found, when we get more complex in your Ruby on Rails app views and we want to define elements that behave like A on click and like B on change. Though this sollution ‘defends itself’ who think that UJS in general is “purity for purity’s sake” approach, since it is so transparent and easy to use in your Ruby on Rails projects.