Introducing DOM-Resource 2
I have been doing a lot of hard core Prototype based AJAX work recently for a client and came to realize that there should be a more DRY (Don’t repeat yourself) way of doing AJAX work.
I mean if you’re already following standards in your rails app and using Rails restful routing, why should you have to repeat yourself in the browser?
So bringing a little side project to life again, I’ve spent the last day or so on DOM-Resource which is my approach to this. It’s really an experiment, but I think it already looks promising.
Quick Intro
Given the following chunk of html:
<div id="people" class="people">
<div id="person_1" class="person">
<div class="name">Pelle</div>
<div class="email">pelleb@gmail.com</div>
</div>
<div id="person_2" class="person">
<div class="name">Bob</div>
<div class="email">bob@gmail.com</div>
</div>
</div>
The div’s are marked up using rails conventions. I use these conventions to map back to the server resources.
You can operate on the people resource using the $RES function:
$RES('people').create({name:'Dwight',email:'dwight@dundermifflin.com'}) => AJAX POST call to /people
$RES('people').find(2) => <div id="person_2"....
$RES('people').find(2).destroy() => AJAX delete to /people/2
Individual objects can be manipulated through the $REC function:
$REC('person_1').get('name') => 'Pelle'
$REC('person_1').resource() => $RES('people')
$REC('person_1').destroy() => AJAX delete to /people/1 then removes from dom
$REC('person_1').action('toggle') => AJAX post to /people/1;toggle then replaces element with result
You can also easily extend your Person objects as if it was a normal Javascript object. For more see the DOM Resource Quick Start.
Alternatives
Jester is a pretty cool ActiveResource clone for JavaScript. It tries hard to mimmic ActiveResource, just in Javascript. I had taken a similar approach earlier on a client project, but decided that I might like a more DOM integrated way of doing it. Go check Jester out. Who knows maybe there is some way we can integrate them in the future.
Download
Download the script here:
You also need Ryan Schuft’s fantastic Javascript Inflection library :
And of course the latest Prototype which you already have if you’re doing rails work.
Create a Software Development Agreement with our free web service Agree2
Trackbacks
Use the following link to trackback from your own site:
http://stakeventures.com/articles/trackback/229





This may be a weather beaten issue ’$’ shouldn’t be used for variable names in scripts. The $ character is reserved for interpreter internals.
Oh that’s just silly. The $ isn’t “reserved”, the spec just suggest the usage for generated code and other stuff. No JS interpreter has ever had troubles with any of the names in Prototype.