<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[act_as_newbie]]></title>
  <link href="http://act-as-newbie.com/atom.xml" rel="self"/>
  <link href="http://act-as-newbie.com/"/>
  <updated>2012-04-09T23:10:56-03:00</updated>
  <id>http://act-as-newbie.com/</id>
  <author>
    <name><![CDATA[Rafael Barbosa]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Nginx + Upload Module and Carrierwave]]></title>
    <link href="http://act-as-newbie.com/blog/2012/04/09/nginx-plus-upload-module-and-carrierwave/"/>
    <updated>2012-04-09T11:15:00-03:00</updated>
    <id>http://act-as-newbie.com/blog/2012/04/09/nginx-plus-upload-module-and-carrierwave</id>
    <content type="html"><![CDATA[<p>Last night was a really long one. Why? Because I couldn&#8217;t find enough information on how to make nginx handle uploads (using upload module and upload progress) and include carrierwave on the equation to handle files after they have been sent to the server.</p>

<p>Maybe I didn&#8217;t search enough, maybe I found only the old deprecated stuff, but after compiling <a href="http://fernando.blat.es/post/11106552363/nginx-upload-module-rails-carrierwave">these</a> <a href="http://blog.joshsoftware.com/2010/10/20/uploading-multiple-files-with-nginx-upload-module-and-upload-progress-bar/">sources</a> I think I came up with a decent solution.</p>

<p>First off, let&#8217;s compile nginx with some upload sugar.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nb">cd</span> /tmp
</span><span class='line'>
</span><span class='line'>wget http://nginx.org/download/nginx-1.1.14.tar.gz
</span><span class='line'>tar -zxvf nginx-1.0.14.tar.gz
</span><span class='line'>
</span><span class='line'>wget http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gz
</span><span class='line'>tar -zxvf nginx_upload_module-2.2.0.tar.gz
</span><span class='line'>
</span><span class='line'><span class="nb">cd </span>nginx-1.0.14
</span><span class='line'>./configure --prefix<span class="o">=</span>/usr/local/nginx-1.1.14 --with-http_ssl_module --with-http_gzip_static_module --conf-path<span class="o">=</span>/etc/nginx/nginx.conf --add-module<span class="o">=</span>../nginx_upload_module-2.2.0/
</span><span class='line'>make
</span><span class='line'>sudo make install
</span></code></pre></td></tr></table></div></figure>


<p>So the module is there, we need to make it come to life in <code>nginx.conf</code></p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
</pre></td><td class='code'><pre><code class='nginx'><span class='line'><span class="k">http</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1"># ... A lot of stuff</span>
</span><span class='line'>  <span class="kn">server</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1"># This will be our route on our rails app</span>
</span><span class='line'>    <span class="kn">location</span> <span class="s">/videos/upload</span> <span class="p">{</span>
</span><span class='line'>      <span class="c1"># app_server is the unicorn upstream</span>
</span><span class='line'>      <span class="kn">proxy_pass</span> <span class="s">http://app_server</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>      <span class="c1"># @app is the unicorn upstream proxy location</span>
</span><span class='line'>      <span class="kn">upload_pass</span> <span class="s">@app</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>      <span class="kn">upload_store</span> <span class="s">/web_apps/mysite/shared/uploads/tmp</span> <span class="mi">1</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>       <span class="c1"># set permissions on the uploaded files</span>
</span><span class='line'>      <span class="kn">upload_store_access</span> <span class="s">user:rw</span> <span class="s">group:rw</span> <span class="s">all:r</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>      <span class="c1"># Set specified fields in request body</span>
</span><span class='line'>      <span class="kn">upload_set_form_field</span> <span class="nv">$upload_field_name[original_filename]</span> <span class="s">&quot;</span><span class="nv">$upload_file_name&quot;</span><span class="p">;</span>
</span><span class='line'>      <span class="kn">upload_set_form_field</span> <span class="nv">$upload_field_name[content_type]</span> <span class="s">&quot;</span><span class="nv">$upload_content_type&quot;</span><span class="p">;</span>
</span><span class='line'>      <span class="kn">upload_set_form_field</span> <span class="nv">$upload_field_name[path]</span> <span class="s">&quot;</span><span class="nv">$upload_tmp_path&quot;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>      <span class="kn">upload_pass_form_field</span> <span class="s">&quot;^X-Progress-ID</span><span class="nv">$|^authenticity_token$&quot;</span><span class="p">;</span>
</span><span class='line'>      <span class="kn">upload_cleanup</span> <span class="mi">400</span> <span class="mi">404</span> <span class="mi">499</span> <span class="mi">500</span><span class="s">-505</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>This is from a server using unicorn to serve the rails app, if you need some help getting started with nginx and unicorn <a href="http://tomkersten.com/articles/nginx-unicorn-rvm-server-setup/">this</a> is a good place to start. And I really recommend that you read <a href="http://www.grid.net.ru/nginx/upload.en.html">upload module&#8217;s docs</a> carefully.</p>

<p>The important bits are the ones starting with &#8220;upload&#8221;.
The way it works is <code>upload_pass</code> routes the request to the <code>@app</code> location after the upload has finished it&#8217;ll pass the form fields you set with <code>upload_pass_form_field</code> along with the ones we&#8217;ll be using to show the file to carrierwave.</p>

<p>Now restart nginx and you&#8217;re good to go. #NOT</p>

<p>As soon as you try to upload anything nginx will complain about permissions or directories it could not found so lets fix that.</p>

<p>I&#8217;m using 1 level deep directory hashing (set on <code>upload store</code>) so I&#8217;ll have to manually create the directory structure and chown it to the user that runs nginx workers (in my case is rafa:rafa).</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>cd /web_apps/mysite/shared/uploads/tmp
</span><span class='line'>mkdir 0 1 2 3 4 5 6 7 8 9
</span><span class='line'>sudo chown -R rafa:rafa /web_apps/mysite/shared/uploads/tmp</span></code></pre></td></tr></table></div></figure>


<p>Now to your rails app. I&#8217;m using mongoid, but this applies to any orm.</p>

<figure class='code'><figcaption><span>video.rb </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='rb'><span class='line'><span class="k">class</span> <span class="nc">Video</span>
</span><span class='line'>  <span class="kp">include</span> <span class="no">Mongoid</span><span class="o">::</span><span class="no">Document</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1"># ...</span>
</span><span class='line'>
</span><span class='line'>  <span class="n">field</span> <span class="ss">:raw_file</span><span class="p">,</span> <span class="ss">:type</span> <span class="o">=&gt;</span> <span class="nb">String</span>
</span><span class='line'>  <span class="n">mount_uploader</span> <span class="ss">:raw_file</span><span class="p">,</span> <span class="no">VideoUploader</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1"># ...</span>
</span><span class='line'>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Lets create the route to recieve the request after the upload is handled by nginx.</p>

<figure class='code'><figcaption><span>routes.rb </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='rb'><span class='line'>  <span class="n">match</span> <span class="s2">&quot;/videos/upload/&quot;</span><span class="p">,</span> <span class="n">as</span><span class="p">:</span> <span class="s2">&quot;upload_videos&quot;</span><span class="p">,</span> <span class="n">controller</span><span class="p">:</span> <span class="s2">&quot;videos&quot;</span><span class="p">,</span> <span class="n">action</span><span class="p">:</span> <span class="s2">&quot;upload&quot;</span><span class="p">,</span> <span class="n">via</span><span class="p">:</span> <span class="ss">:post</span>
</span></code></pre></td></tr></table></div></figure>


<p>And the action to save it.</p>

<figure class='code'><figcaption><span>videos_controller.rb </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='rb'><span class='line'><span class="k">def</span> <span class="nf">upload</span>
</span><span class='line'>  <span class="vi">@video</span> <span class="o">=</span> <span class="no">Video</span><span class="o">.</span><span class="n">build</span><span class="p">(</span><span class="n">params</span><span class="o">[</span><span class="ss">:video</span><span class="o">]</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1"># Production/staging only, development will go the carrierwave way.</span>
</span><span class='line'>  <span class="k">if</span> <span class="no">Rails</span><span class="o">.</span><span class="n">env</span> <span class="o">!=</span> <span class="s2">&quot;development&quot;</span>
</span><span class='line'>    <span class="vi">@video</span><span class="o">.</span><span class="n">raw_file</span> <span class="o">=</span> <span class="no">ActionDispatch</span><span class="o">::</span><span class="no">Http</span><span class="o">::</span><span class="no">UploadedFile</span><span class="o">.</span><span class="n">new</span><span class="p">(</span>
</span><span class='line'>      <span class="n">filename</span><span class="p">:</span> <span class="n">params</span><span class="o">[</span><span class="s1">&#39;video&#39;</span><span class="o">][</span><span class="s1">&#39;raw_file&#39;</span><span class="o">][</span><span class="s1">&#39;original_filename&#39;</span><span class="o">]</span><span class="p">,</span>
</span><span class='line'>      <span class="n">tempfile</span><span class="p">:</span> <span class="no">File</span><span class="o">.</span><span class="n">open</span><span class="p">(</span><span class="n">params</span><span class="o">[</span><span class="s1">&#39;video&#39;</span><span class="o">][</span><span class="s1">&#39;raw_file&#39;</span><span class="o">][</span><span class="s1">&#39;path&#39;</span><span class="o">]</span><span class="p">)</span>
</span><span class='line'>    <span class="p">)</span>
</span><span class='line'>    <span class="vi">@video</span><span class="o">.</span><span class="n">name</span> <span class="o">=</span> <span class="n">params</span><span class="o">[</span><span class="s1">&#39;video&#39;</span><span class="o">][</span><span class="s1">&#39;raw_file&#39;</span><span class="o">][</span><span class="s1">&#39;original_filename&#39;</span><span class="o">].</span><span class="n">chomp</span><span class="p">(</span><span class="s2">&quot;.raw&quot;</span><span class="p">)</span>
</span><span class='line'>  <span class="k">else</span>
</span><span class='line'>    <span class="vi">@video</span><span class="o">.</span><span class="n">name</span> <span class="o">=</span> <span class="n">params</span><span class="o">[</span><span class="s1">&#39;video&#39;</span><span class="o">][</span><span class="s1">&#39;raw_file&#39;</span><span class="o">].</span><span class="n">original_filename</span><span class="o">.</span><span class="n">chomp</span><span class="p">(</span><span class="s2">&quot;.raw&quot;</span><span class="p">)</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="vi">@video</span><span class="o">.</span><span class="n">save!</span>
</span><span class='line'>  <span class="n">render</span> <span class="ss">:json</span> <span class="o">=&gt;</span> <span class="vi">@video</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>The trick here is to simulate a <code>ActionDispatch::Http::UploadedFile</code> being passed to carrierwave.</p>

<p>This will send the file to the right place, but I still have some quirks to solve. Like the temporary dir cleanup task and the content_type validation. Once I get the hang of those I&#8217;ll update this post.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Client_side_validations and Dynamic Nested Forms]]></title>
    <link href="http://act-as-newbie.com/blog/2011/08/22/client-side-validations-and-dynamic-nested-forms/"/>
    <updated>2011-08-22T20:59:00-03:00</updated>
    <id>http://act-as-newbie.com/blog/2011/08/22/client-side-validations-and-dynamic-nested-forms</id>
    <content type="html"><![CDATA[<p>Last week I found a little caveat when using the <a href="https://github.com/bcardarella/client_side_validations">client_side_validations</a> gem with ajax-loaded forms. It didn&#8217;t work out of the box.</p>

<p>Digging through the sourcecode I found this comment</p>

<figure class='code'><figcaption><span>rails.validations.js </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'>  <span class="c1">// Main hook</span>
</span><span class='line'>  <span class="c1">// If new forms are dynamically introduced into the DOM the .validate() method</span>
</span><span class='line'>  <span class="c1">// must be invoked on that form</span>
</span><span class='line'>  <span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;form[data-validate]&#39;</span><span class="p">).</span><span class="nx">validate</span><span class="p">();</span> <span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Ok, so I called <code>$("#my-form").validate()</code> on <code>ajax:success</code> and everything was fine! <em>Except it wasn&#8217;t =/</em></p>

<p>The behavior I understood, after banging my head against the wall several times was: if the form was entirely rendered in my ajax call it would validate ok, but if I added some fields inside it dynamically then I&#8217;d start getting those nasty <code>validators is not defined</code> errors and everything would go boom!</p>

<p>So how do I add some fields to the form and keep them &#8220;validatable&#8221;?
<a href="https://github.com/bcardarella/client_side_validations/issues/149">this issue</a> gave me some insight. And after rummaging the code a little more I found that this gem registers the validators in the <code>window</code> object. This process is done inside the form renderer, and that&#8217;s why the full rendered forms worked and adding just some of the fields did not. To accomplish that I created this helper</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'>  <span class="k">def</span> <span class="nf">add_dynamic_validators</span><span class="p">(</span><span class="n">builders</span><span class="p">)</span>
</span><span class='line'>    <span class="n">result</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span>
</span><span class='line'>    <span class="n">builders</span><span class="o">.</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">builder</span><span class="o">|</span>
</span><span class='line'>      <span class="n">builder</span><span class="o">.</span><span class="n">object</span><span class="o">.</span><span class="n">client_side_validation_hash</span><span class="o">.</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">validator</span><span class="o">|</span>
</span><span class='line'>        <span class="n">result</span> <span class="o">+=</span> <span class="s2">&quot;window[form_id].validators[&#39;</span><span class="si">#{</span><span class="n">builder</span><span class="o">.</span><span class="n">object_name</span><span class="si">}</span><span class="s2">[</span><span class="si">#{</span><span class="n">validator</span><span class="o">[</span><span class="mi">0</span><span class="o">]</span><span class="si">}</span><span class="s2">]&#39;] = </span><span class="si">#{</span><span class="n">validator</span><span class="o">[</span><span class="mi">1</span><span class="o">].</span><span class="n">to_json</span><span class="si">}</span><span class="s2">;</span><span class="se">\n</span><span class="s2">&quot;</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>    <span class="n">result</span><span class="o">.</span><span class="n">html_safe</span>
</span><span class='line'>  <span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>It recieves an array of form builders and inspect it for the validators added by the gem. Then it prints the resulting instruction within the form partial, inside a function, to which I pass the id of the form that I want to validate.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'>  <span class="kd">function</span> <span class="nx">update_dynamic_fields</span><span class="p">(</span><span class="nx">form_id</span><span class="p">)</span>
</span><span class='line'>  <span class="p">{</span>
</span><span class='line'>    <span class="o">&lt;%=</span> <span class="nx">add_dynamic_validators</span> <span class="nx">builders</span> <span class="o">%&gt;</span>
</span><span class='line'>  <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Then after the fields (with the script block) were added the to form you can call</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'>  <span class="kd">var</span> <span class="nx">$form</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#my-form&quot;</span><span class="p">);</span>
</span><span class='line'>  <span class="nx">update_dynamic_fields</span><span class="p">(</span><span class="nx">$form</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;id&quot;</span><span class="p">));</span>
</span></code></pre></td></tr></table></div></figure>


<p>I know this is hacky as hell, but with this I was able to keep using this gem even inside pages with lots of moving parts.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[ICanHaz templates - Dealing with the lack of dot notation]]></title>
    <link href="http://act-as-newbie.com/blog/2011/08/11/i-can-haz-js-template/"/>
    <updated>2011-08-11T00:00:00-03:00</updated>
    <id>http://act-as-newbie.com/blog/2011/08/11/i-can-haz-js-template</id>
    <content type="html"><![CDATA[<p><strong>[UPDATE: 30/10/2011]</strong> According to <a href="https://github.com/janl/mustache.js/issues/97">this issue</a> we now have dot notation in moustache.js! Yay!</p>

<p>The <a href="http://icanhazjs.com/">ICanHaz</a> javascript templating system is just awesome. It is really simple, and powerful, BUT as all good things in life it&#8217;s not perfect! ICanHaz is built on top of <a href="https://github.com/janl/mustache.js">moustache.js</a> that, on his part, is a javascript implementation of the moustache templates. Originally the moustache implementation didn&#8217;t support dot notation for accessing nested objects. Like for instance</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'>    <span class="kd">var</span> <span class="nx">post</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">title</span> <span class="o">:</span> <span class="s2">&quot;Post title&quot;</span><span class="p">,</span>
</span><span class='line'>      <span class="nx">body</span> <span class="o">:</span> <span class="s2">&quot;post body&quot;</span><span class="p">,</span>
</span><span class='line'>      <span class="nx">author</span> <span class="o">:</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">name</span> <span class="o">:</span> <span class="s2">&quot;Rafael Barbosa&quot;</span><span class="p">,</span>
</span><span class='line'>        <span class="nx">age</span> <span class="o">:</span> <span class="mi">26</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>    <span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>Normally you can access the author&#8217;s name in my js files via dot notation like <code>post.author.name</code>, but until <a href="https://github.com/defunkt/mustache/commit/c183699ff1b23b4bc5efbfa3ed323ff9509855f7">this commit</a> this wasn&#8217;t possible within moustache&#8217;s templates and it still isn&#8217;t supported by the javascript implementation. So how can I access nested objects? The same way you iterate over arrays!</p>

<p>For the post object above, inside an ICanHaz template</p>

<div><script src='https://gist.github.com/1161362.js?file='></script>
<noscript><pre><code>&lt;div class=&quot;post&quot;&gt;
  &lt;h3&gt;{{ title }}&lt;/h3&gt;
  &lt;div&gt;{{ body }}&lt;/div&gt;
  &lt;div&gt;A post by {{ #author }}{{ name }}{{author}}&lt;/div&gt;
&lt;/div&gt;</code></pre></noscript></div>


<p>And that&#8217;ll do it. There&#8217;s an <a href="https://github.com/janl/mustache.js/issues/97">open issue</a> on the moustache.js github for the inclusion of the dot notation.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Show hierarchical data using recursive partials]]></title>
    <link href="http://act-as-newbie.com/blog/2011/08/03/recursive-partials/"/>
    <updated>2011-08-03T00:00:00-03:00</updated>
    <id>http://act-as-newbie.com/blog/2011/08/03/recursive-partials</id>
    <content type="html"><![CDATA[<p>Yesterday I needed to show a deep nested tree in a view. The first solution that crossed my mind was something along the lines of a recursive helper like this one.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">def</span> <span class="nf">display_tree_recursive</span><span class="p">(</span><span class="n">tree</span><span class="p">,</span> <span class="n">parent_id</span><span class="p">)</span>
</span><span class='line'>  <span class="n">ret</span> <span class="o">=</span> <span class="s2">&quot;&lt;ul&gt;&quot;</span>
</span><span class='line'>  <span class="n">tree</span><span class="o">.</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">node</span><span class="o">|</span>
</span><span class='line'>    <span class="k">if</span> <span class="n">node</span><span class="o">.</span><span class="n">parent_id</span> <span class="o">==</span> <span class="n">parent_id</span>
</span><span class='line'>      <span class="n">ret</span> <span class="o">+=</span> <span class="s2">&quot;&lt;li&gt;&quot;</span>
</span><span class='line'>      <span class="n">ret</span> <span class="o">+=</span> <span class="n">link_to</span> <span class="n">node</span><span class="o">.</span><span class="n">title</span>
</span><span class='line'>      <span class="n">ret</span> <span class="o">+=</span> <span class="n">display_tree_recursive</span><span class="p">(</span><span class="n">tree</span><span class="p">,</span> <span class="n">node</span><span class="o">.</span><span class="n">id</span><span class="p">)</span>
</span><span class='line'>      <span class="n">ret</span> <span class="o">+=</span> <span class="s2">&quot;&lt;/li&gt;&quot;</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>  <span class="n">ret</span> <span class="o">+=</span> <span class="s2">&quot;&lt;/ul&gt;&quot;</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>That&#8217;s ok for simple ul-li pairs but I needed much more markup since my task was to show this information as nested accordions. Wouldn&#8217;t it be better if I could define a partial and call it from inside itself passing the children as its <code>locals</code> variables? Guess what? It works just like that! =)</p>

<p>In the index view</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='erb'><span class='line'><span class="x">&lt;ul class=&quot;accordion&quot;&gt;</span>
</span><span class='line'><span class="x">    </span><span class="cp">&lt;%</span> <span class="vi">@sections</span><span class="o">.</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">section</span><span class="o">|</span> <span class="cp">%&gt;</span><span class="x"></span>
</span><span class='line'><span class="x">      &lt;li&gt;</span>
</span><span class='line'><span class="x">        &lt;h3&gt;</span><span class="cp">&lt;%=</span> <span class="n">section</span><span class="o">.</span><span class="n">name</span> <span class="cp">%&gt;</span><span class="x">&lt;/h3&gt;</span>
</span><span class='line'><span class="x">        &lt;div class=&quot;accordion-content&quot;&gt;</span>
</span><span class='line'><span class="x">          &lt;ul class=&quot;accordion&quot;&gt;</span>
</span><span class='line'><span class="x">            </span><span class="cp">&lt;%=</span> <span class="n">render</span> <span class="s2">&quot;section/section_children&quot;</span><span class="p">,</span> <span class="ss">:section</span> <span class="o">=&gt;</span> <span class="n">section</span> <span class="cp">%&gt;</span><span class="x"></span>
</span><span class='line'><span class="x">          &lt;/ul&gt;</span>
</span><span class='line'><span class="x">        &lt;/div&gt;</span>
</span><span class='line'><span class="x">      &lt;/li&gt;</span>
</span><span class='line'><span class="x">    </span><span class="cp">&lt;%</span> <span class="k">end</span> <span class="cp">%&gt;</span><span class="x"></span>
</span><span class='line'><span class="x">  &lt;/ul&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>That <code>section/section_children</code> partial is the trick. Inside it we have</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='erb'><span class='line'><span class="cp">&lt;%</span> <span class="n">section</span><span class="o">.</span><span class="n">children</span><span class="o">.</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">child</span><span class="o">|</span> <span class="cp">%&gt;</span><span class="x"></span>
</span><span class='line'><span class="x">  &lt;li&gt;</span>
</span><span class='line'><span class="x">    &lt;h3 &gt;&lt;a href=&quot;#&quot; class=&quot;header&quot;&gt;</span><span class="cp">&lt;%=</span> <span class="n">child</span><span class="o">.</span><span class="n">name</span> <span class="cp">%&gt;</span><span class="x">&lt;/a&gt;&lt;/h3&gt;</span>
</span><span class='line'><span class="x">      &lt;div class=&quot;accordion-content&quot;&gt;</span>
</span><span class='line'><span class="x">        &lt;ul class=&quot;accordion&quot;&gt;</span>
</span><span class='line'><span class="x">          </span><span class="cp">&lt;%=</span> <span class="n">render</span> <span class="s2">&quot;section/section_children&quot;</span><span class="p">,</span> <span class="ss">:section</span> <span class="o">=&gt;</span> <span class="n">child</span> <span class="cp">%&gt;</span><span class="x"></span>
</span><span class='line'><span class="x">        &lt;/ul&gt;</span>
</span><span class='line'><span class="x">      &lt;/div&gt;</span>
</span><span class='line'><span class="x">  &lt;/li&gt;</span>
</span><span class='line'><span class="cp">&lt;%</span> <span class="k">end</span> <span class="cp">%&gt;</span><span class="x"></span>
</span></code></pre></td></tr></table></div></figure>


<p>and that&#8217;s it!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Starting things up]]></title>
    <link href="http://act-as-newbie.com/blog/2011/08/02/a-start/"/>
    <updated>2011-08-02T00:00:00-03:00</updated>
    <id>http://act-as-newbie.com/blog/2011/08/02/a-start</id>
    <content type="html"><![CDATA[<p>Time to start sharing whatever knowledge comes my way! This will be the first post on this blog and I hope many will follow. I&#8217;ll mainly talk about Rails and its fellas, so if that&#8217;s your thing stick around!</p>
]]></content>
  </entry>
  
</feed>
