Home

Elemental

HTML Element Names as Helper Methods

Summary
HTML Elements as Helper-Methods:

    <%= h1 @item.name %>
    <%= p @item.content %>
    <%= p span @person.first_name, :id => dom_id(@person, "name_") %>

or even

    <% table do @list.each do |item| %>
      <%= tr :id => dom_id(item) do %>
        <%= td item.name %>
        <%= td item.content %>
      <%= end %>
    <% end end %>

Elemental allows you to use XHTML Transitional tags as helper methods in your rhtml.

Usage

Elemental has three basic usages:

  1. Self-closing tags: no argument, or hash only for argument: 
      <% br %>
      <% br :class => "someClass" %>

  2. Content tags: first argument is the value of the content: 
      <%= p "some content" %>
      <%= p "some content", :id => dom_id(@object) %>

  3. Content tags with a block argument:
      <% div :class => "some-class" do %>
        ...
      <% end %>

You can nest Elemental methods:

    <%= p span @object.value %>
or
<%= p(span(@object.value)) %>
generates:
    
the object’s value

The same thing with attributes:

    <%= p span(@object.value, :id => "some_id"), :class => "some_class" %>
generates:
    
the object’s value

You can nest the methods in blocks:

    <% p do %>
      <% span :class => "someClass" do %>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <% end %>
    <% end %>

    or

    <% p do span :class => "someClass" do %>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <% end end %>

      which both generate:

    <p>
      <span class="someClass">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </span>
    </p>

This is useful for loops:

    <% ul do ['one', 'two', 'three'].each do |item| %>
      <%= li item, :id => item %>
    <% end end %>

      which generates:

    <ul>
      <li id="one">one</li>
      <li id="two">two</li>
      <li id="three">three</li>
    </ul>

Options/Attributes Hash

Options are converted to regular html attributes. None are filtered, so you can certainly insert invalid attributes.

    <%= span :id => "some_id", :bogus_attribute => "some_value"%>

      generates:

    <span id="some_id" bogus_attribute="some_value"></span>

Omitted Tags

Rails’ ActionView::Helpers already defines form, select, input, and label, so these are omitted from Elemental.

Motivation

I didn’t like inserting ERB tags inside of html attributes—it’s ugly! Plus, I didn’t want to use html tags when a “p” or a “div” should suffice. Afer using Markaby a bit, I decided there were situations where I wanted a Markaby or Builder-type syntax within rhtml’s context. I had been using content_tag quite a bit for convenience, but wanted more legible and concise code, espcially for loops.

Acknowledgments
_why for Markaby and its list of XHTML and XHTML Transitional tag lists, which I used.