Behavior: CSS-like application of Javascript
Lamda the Ultimate just pointed out a cool new Javascript tool that should make AJAX-ifying web sites much cleaner and more maintainable. By using Behavior, you can strip all of the ugly little <script>
and onclick=""
tags out of your website and then specify all of the Javascript actions out of line using CSS selectors. Here’s the example from their website:
So, instead of this:
<li>
<a onclick="this.parentNode.removeChild(this)" href="#">
Click me to delete me
</a>
</li>
You can use:
<ul id="example">
<li>
<a href="/someurl">Click me to delete me</a>
</li>
</ul>
Then you feed something like this into Behavior:
var myrules = {
'#example li' : function(el){
el.onclick = function(){
this.parentNode.removeChild(this);
}
}
};
Behaviour.register(myrules);
It’s a little too verbose to use in this example, but the basic mechanism is really cool. I’d love to see this extended one step further, with Behavior being able to parse a configuration more like this:
#example li:onclick {
this.parentNode.removeChild(this);
}
You’d drop that into a file on your web server, say mylayout.jcss
. Then you’d have a block like this at the top of the HTML file:
<script>Behavior.import("mylayout.jcss");</script>
I’m not exactly a Javascript wiz, but this looks vastly cleaner to me. I’d love to see something like this included into a future release of Rails.