<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>rel=me &#187; prototype</title>
	<atom:link href="http://rel.me/t/prototype/feed/" rel="self" type="application/rss+xml" />
	<link>http://rel.me</link>
	<description>programming, objective-c, cocoa, iphone, c</description>
	<lastBuildDate>Mon, 02 Aug 2010 20:09:36 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Automating JS behavior registration</title>
		<link>http://rel.me/2007/05/16/automating-js-behavior-registration/</link>
		<comments>http://rel.me/2007/05/16/automating-js-behavior-registration/#comments</comments>
		<pubDate>Wed, 16 May 2007 19:01:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[prototype]]></category>

		<guid isPermaLink="false">/2007/09/03/automating-js-behavior-registration</guid>
		<description><![CDATA[I created a behaviors javascript class to handle all my (prototype) Event observe registrations. Annotating DOM elements with the metadata needed to register itself automatically, which would save you from having to call Behavior.register(..). The behavior class is defined in behavior.js (The idea of parsing the entire DOM came from a co-worker at revolutionhealth.com). This [...]]]></description>
			<content:encoded><![CDATA[<p>I created a behaviors javascript class to handle all my (prototype) Event observe registrations. Annotating DOM elements with the metadata needed to register itself automatically, which would save you from having to call Behavior.register(..).<br/></p>
<p>The behavior class is defined in <a href="http://dclicio.us/javascripts/behavior.js">behavior.js</a> (The idea of parsing the entire DOM came from a co-worker at <a href="http://www.revolutionhealth.com">revolutionhealth.com</a>). This traversal maybe be expensive but if you had a ton of behaviors that register using CSS selectors, this might be faster (Don&#8217;t quote me on this though).<br/></p>
<p>If you have a link, and wanted to provide an AJAX call without being obtrusive:</p>
<table class="CodeRay">
<tr>
<td class="line_numbers" title="click to toggle" onclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }">
<pre><tt>
</tt></pre>
</td>
<td class="code">
<pre ondblclick="with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }">&lt;a class=&quot;bvr-observe-click-xhrTheFunction&quot; href=&quot;/the/href&quot;&gt;The link&lt;/a&gt;</pre>
</td>
</tr>
</table>
<p>The AJAX request:</p>
<table class="CodeRay">
<tr>
<td class="line_numbers" title="click to toggle" onclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }">
<pre>1<tt>
</tt>2<tt>
</tt>3<tt>
</tt>4<tt>
</tt>5<tt>
</tt>6<tt>
</tt></pre>
</td>
<td class="code">
<pre ondblclick="with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }">function xhrTheFunction(event) {  <tt>
</tt>  var element = Event.element(event);<tt>
</tt>  var url = element.readAttribute(&quot;href&quot;);<tt>
</tt>  new Ajax.Updater(&quot;div_to_update&quot;, url, { });  <tt>
</tt>  Event.stop(event);<tt>
</tt>}</pre>
</td>
</tr>
</table>
<p>To create and apply the behavior, starting at id=&#8221;content&#8221;:</p>
<table class="CodeRay">
<tr>
<td class="line_numbers" title="click to toggle" onclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }">
<pre>1<tt>
</tt>2<tt>
</tt></pre>
</td>
<td class="code">
<pre ondblclick="with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }">var dclBehavior = new Behavior();<tt>
</tt>dclBehavior.apply($('content'));</pre>
</td>
</tr>
</table>
<p>It will automatically register for the event observe. In other words it would do the following for you automatically:</p>
<table class="CodeRay">
<tr>
<td class="line_numbers" title="click to toggle" onclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }">
<pre><tt>
</tt></pre>
</td>
<td class="code">
<pre ondblclick="with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }"> Event.observe(theLinkElement, &quot;click&quot;, function(event) { xhrTheFunction(event) });</pre>
</td>
</tr>
</table>
<p>You could also handle other common tasks through bvr-* naming conventions. And you could also manually register your behaviors.</p>
<p>I am using this over at <a href="http://dclicio.us">dclicio.us</a>, in a couple places, if you want to see it in action.</p>
<p><strong>Update:</strong>This is just a proof of concept (not entirely functional). The idea is to parse the DOM all in one shot so if you have a ton of behaviors, you don&#8217;t have to deal with alot of selector rules.<br />
 You could add other naming conventions, probably make them less verbose, change it to do binding, etc. Its definately not a good solution if you are only observing clicks <img src='http://rel.me/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p>
]]></content:encoded>
			<wfw:commentRss>http://rel.me/2007/05/16/automating-js-behavior-registration/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
