[Be el o ge]

Learning Rails on a real project (ListKungFu.com) is great fun and you’ll find out everyday something else which makes Rails the awesome framework it is. In the beginning of cause, that are rather small but unbelievable convenient things, in this case that is: The content_for helper command.

In an application as simple as List Kung Fu most views are structured like that:

So we have the ListKungFu logo, a profile and a logout link in the header and some notes in the footer. All this you typically would find in a layout file (application.html.erb) because it’s likely you wanna display these elements on each page of your application. The more page specific data is rendered using a template, in this case show.html.erb.

List Kung Fu uses a fair amount of Javascript. My first approach was putting everything in a single .js file and loading it in application.html.erb. That’s ok for the beginning but becomes pretty soon pretty ugly. First, you end up with one big Javascript file which is not really nice for maintaining, second and that’s much worse: The user’s browser is loading the Javascript code for the complete application even though just a fraction of it is used per page.

Obviously the first thing you wanna do is splitting up the big Javascript file. My splitting strategy goes like this:

• Code which is used all over the application and which might be useful even in different applications I put into application.js. This file in included in the layout file.
• Second, I created a file called listkungfu.js containing Javascript which is also used over the whole application but is more specific and therefore unlikely to be reused in another application.
• All Javascript code which is specific to just a small part of a application, e.g. a single view, I put into a separate file. Following above example there is for instance a file called lists_show.js for the show.html.erb view.

All we have to do now is including application.js and listkungfu.js in the layout file and lists_show.js in the view template.

<%=javascript_include_tag 'lists_show' %>

Done.

Hm… after loading the view in the browser and looking at the generated HTML you might not be satisfied a 100%. The Javascript files included in application.html.erb nicely line up at the bottom of the page, but lists_show.js is loaded somewhere in the middle of the HTML.

So, how do we move it down? You might have guessed it: content_for to the rescue!

Let’s replace above code with:

<% content_for :addtional_scripts do %>
    <%=javascript_include_tag 'lists_show' %>
<% end %>

And yield the content at the end of the layout file:

    <%= javascript_include_tag 'application', 'listkungfu' %>
    <%= yield(:addtional_scripts) %>
  </body>
</html>

After reloading the view in the browser you’ll find the view specific Javascript file loaded after the two general files.

Very cool!

content_for can be used for a dozen other things, too. Think about having a side bar defined in the layout displaying view specific information, etc…