Flowdock

Action View templates can be written in three ways. If the template file has a .rhtml extension then it uses a mixture of ERb (included in Ruby) and HTML. If the template file has a .rxml extension then Jim Weirich’s Builder::XmlMarkup library is used. If the template file has a .rjs extension then it will use ActionView::Helpers::PrototypeHelper::JavaScriptGenerator.

ERb

You trigger ERb by using embeddings such as <% %> and <%= %>. The difference is whether you want output or not. Consider the following loop for names:

  <b>Names of all the people</b>
  <% for person in @people %>
    Name: <%= person.name %><br/>
  <% end %>

The loop is setup in regular embedding tags (<% %>) and the name is written using the output embedding tag (<%= %>). Note that this is not just a usage suggestion. Regular output functions like print or puts won’t work with ERb templates. So this would be wrong:

  Hi, Mr. <% puts "Frodo" %>

(If you absolutely must write from within a function, you can use the TextHelper#concat)

Using sub templates

Using sub templates allows you to sidestep tedious replication and extract common display structures in shared templates. The classic example is the use of a header and footer (even though the Action Pack-way would be to use Layouts):

  <%= render "shared/header" %>
  Something really specific and terrific
  <%= render "shared/footer" %>

As you see, we use the output embeddings for the render methods. The render call itself will just return a string holding the result of the rendering. The output embedding writes it to the current template.

But you don’t have to restrict yourself to static includes. Templates can share variables amongst themselves by using instance variables defined using the regular embedding tags. Like this:

  <% @page_title = "A Wonderful Hello" %>
  <%= render "shared/header" %>

Now the header can pick up on the @page_title variable and use it for outputting a title tag:

  <title><%= @page_title %></title>

Passing local variables to sub templates

You can pass local variables to sub templates by using a hash with the variable names as keys and the objects as values:

  <%= render "shared/header", { "headline" => "Welcome", "person" => person } %>

These can now be accessed in shared/header with:

  Headline: <%= headline %>
  First name: <%= person.first_name %>

Template caching

By default, Rails will compile each template to a method in order to render it. When you alter a template, Rails will check the file’s modification time and recompile it.

Builder

Builder templates are a more programmatic alternative to ERb. They are especially useful for generating XML content. An XmlMarkup object named xml is automatically made available to templates with a .rxml extension.

Here are some basic examples:

  xml.em("emphasized")                              # => <em>emphasized</em>
  xml.em { xml.b("emp & bold") }                    # => <em><b>emph &amp; bold</b></em>
  xml.a("A Link", "href"=>"http://onestepback.org") # => <a href="http://onestepback.org">A Link</a>
  xml.target("name"=>"compile", "option"=>"fast")   # => <target option="fast" name="compile"\>
                                                    # NOTE: order of attributes is not specified.

Any method with a block will be treated as an XML markup tag with nested markup in the block. For example, the following:

  xml.div {
    xml.h1(@person.name)
    xml.p(@person.bio)
  }

would produce something like:

  <div>
    <h1>David Heinemeier Hansson</h1>
    <p>A product of Danish Design during the Winter of '79...</p>
  </div>

A full-length RSS example actually used on Basecamp:

  xml.rss("version" => "2.0", "xmlns:dc" => "http://purl.org/dc/elements/1.1/") do
    xml.channel do
      xml.title(@feed_title)
      xml.link(@url)
      xml.description "Basecamp: Recent items"
      xml.language "en-us"
      xml.ttl "40"

      for item in @recent_items
        xml.item do
          xml.title(item_title(item))
          xml.description(item_description(item)) if item_description(item)
          xml.pubDate(item_pubDate(item))
          xml.guid(@person.firm.account.url + @recent_items.url(item))
          xml.link(@person.firm.account.url + @recent_items.url(item))

          xml.tag!("dc:creator", item.author_name) if item_has_creator?(item)
        end
      end
    end
  end

More builder documentation can be found at http://builder.rubyforge.org.

JavaScriptGenerator

JavaScriptGenerator templates end in .rjs. Unlike conventional templates which are used to render the results of an action, these templates generate instructions on how to modify an already rendered page. This makes it easy to modify multiple elements on your page in one declarative Ajax response. Actions with these templates are called in the background with Ajax and make updates to the page where the request originated from.

An instance of the JavaScriptGenerator object named page is automatically made available to your template, which is implicitly wrapped in an ActionView::Helpers::PrototypeHelper#update_page block.

When an .rjs action is called with link_to_remote, the generated JavaScript is automatically evaluated. Example:

  link_to_remote :url => {:action => 'delete'}

The subsequently rendered delete.rjs might look like:

  page.replace_html  'sidebar', :partial => 'sidebar'
  page.remove        "person-#{@person.id}"
  page.visual_effect :highlight, 'user-list'

This refreshes the sidebar, removes a person element and highlights the user list.

See the ActionView::Helpers::PrototypeHelper::JavaScriptGenerator documentation for more details.

Show files where this class is defined (2 files)
Register or log in to add new notes.
July 25, 2008 - (v1.0.0 - v2.1.0)
4 thanks

haml, an alternative to ERb

Want something nicer looking (and currently, faster!) than using ERb for your views? Have a look at haml (and it’s companion, sass, for stylesheets). It will make you feel all fuzzy on the inside, I promise :P.

ERb example

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
</div>

haml equivalent

#profile
  .left.column
    #date= print_date
    #address= current_user.address

Shifting to haml from ERb feels strange at first, but after about 20 minutes it starts to feel nice. A little longer and you’ll really start to notice your productivity (and of course, happiness) increase! :). I’ve starting shifting all new projects developed at our work office over to using haml (and sass), it’s been fantastic!

At first I came across a few things that I couldn’t do in haml, though every time a quick read of the overview doc page would show me a simple syntax for overcoming that issue! :) (which out of interest, is located here: http://haml.hamptoncatlin.com/docs/rdoc/classes/Haml.html)

Give the tutorial a shot if you’re interested: http://haml.hamptoncatlin.com/tutorial