Use composition in Rails - html

Question

I don't know which is the best or right way to make something, so I'm looking for suggestions.
Stage:
I am using Rails 3 to make some web app.
Imaging two models: Canvas and Zone.
A canvas object intents to be a square in which there will be four zone's (north, south, east and west).
Each zone has these attributes: text:string and rgb_color:string.
I want to render a HTML form in which user must capture a Canvas registry, in other words, in this form will have four groups of zones fields.
Problem:
How can I capture all of them in one HTML form?
If I would have only one zone I can do something like this:
<%= form_for(#zone) do |f| %>
<div class="field">
<%= f.label :text %><br />
<%= f.text_field :text %>
</div>
<div class="field">
<%= f.label :rgb_color %><br />
<%= f.text_field :rgb_color %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
But how should I do it with four zones?

Answer 1

You can do this with accepts_nested_attributes_for and fields_for:
Model:
class Canvas < ActiveRecord::Base
has_many :zones
accepts_nested_attributes_for :zones
end
Controller:
class CanvasesController < ApplicationController
def new
#canvas = Canvas.new
4.times { #canvas.zones.build }
end
end
View:
<%= form_for(#canvas) do |f| %>
<%= f.fields_for :zones do |zone| %>
<div class="field">
<%= zone.label :text %><br />
<%= zone.text_field :text %>
</div>
<div class="field">
<%= zone.label :rgb_color %><br />
<%= zone.text_field :rgb_color %>
</div>
<% end %>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
For more details and explanation have a look at this:
Nested Model Form Part 1
Nested Model Form Part 2