Skip to content
Nathan Van der Auwera edited this page Jun 8, 2018 · 9 revisions

Usage

This is the same section from the README but translated to ERB, just in case HAML is unknown or unfamiliar. Please compare the following code-morcels with HAML, and I hope it will urge you to go learn HAML :)

Using formtastic

Inside our projects/_form partial we then write:

<%= semantic_form_for @project do |f| %>
  <% f.inputs do %>
    <%= f.input :name %>
    <%= f.input :description %>
    <h3>Tasks</h3>
    <div id='tasks'>
      <%= f.semantic_fields_for :tasks do |task| %>
        <%= render 'task_fields', :f => task %>
      <% end %>
      <div class='links'>
        <%= link_to_add_association 'add task', f, :tasks %>
      </div>
    </div>
    <% f.buttons do %>
      <%= f.submit 'Save' %>
    <% end %>
  <% end %>
<% end %>

and inside the _task_fields partial we write:

<div class='nested-fields'>
  <%= f.inputs do %>
    <%= f.input :description %>
    <%= f.input :done, :as => :boolean %>
    <%= link_to_remove_association "remove task", f %>
  <% end %>
</div>

Using SimpleForm

Inside our projects/_form partial we then write:

<%= simple_form_for @project do |f| %>
  <%= f.input :name %>
  <%= f.input :description %>
  <h3>Tasks</h3>
  <div id='tasks'>
    <%= f.simple_fields_for :tasks do |task| %>
      <%= render 'task_fields', :f => task %>
    <% end %>
    <div class='links'>
      <%= link_to_add_association 'add task', f, :tasks %>
    </div>
  </div>
  <%= f.submit 'Save' %>
<% end %>

and inside the _task_fields partial we write:

<div class='nested-fields'>
    <%= f.input :description %>
    <%= f.input :done, :as => :boolean %>
    <%= link_to_remove_association "remove task", f %>
</div>

Using standard rails forms

Inside our projects/_form partial we then write:

<%= form_for @project do |f| %>
  <div class="field">
    <%= f.label :name %>
    <br/>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :description %>
    <br/>
    <%= f.text_field :description %>
  </div>
  <h3>Tasks</h3>
  <div id='tasks'>
    <%= f.fields_for :tasks do |task| %>
      <%= render 'task_fields', :f => task %>
    <% end %>
    <div class='links'>
      <%= link_to_add_association 'add task', f, :tasks %>
    </div>
  </div>
  <%= f.submit 'Save' %>
<% end %>

and inside the _task_fields partial we write:

  <div class='nested-fields'>
    <div class="field">
      <%= f.label :description %>
      <%= f.text_field :description %>
    </div>
    <div class="field">
      <%= f.check_box :done %>
      <%= f.label :done %>
    </div>
    <%= link_to_remove_association "remove task", f %>
  </div>

That is all there is to it!