STEP 13: 確認画面(3)

「Ruby on Railsで確認画面を作る」の続きです。今回は「戻る」ボタンを実装します。

基本的な考え方は「newアクションに対して現在の入力内容を POST する」です。

---

まずは、ルーティングの変更から。

$ edit config/routes.rb

ActionController::Routing::Routes.draw do |map|
  map.root :controller => 'top', :action => 'index'

  map.resources :tasks,
    :new => { :new => :post },
    :member => { :simple => :get, :finish => :put },
    :collection => { :unfinished => :get, :confirm => :post }
end

この変更により /tasks/new という URL にデータを POST できるようになります。

本来、newアクションは GET メソッドしか受け付けませんが、POST メソッドも許可した、というわけです。

---

次に、ビューを作ります。

確認画面のテンプレートをエディタで修正します。

$ edit app/views/tasks/confirm.html.erb

<h1>確認画面</h1>

<%= render :partial => 'record' %>

<div class="buttonGroup">
<%= render :partial => 'button_to_back' %>
<%= render :partial => 'button_to_save' %>
</div>

---

「戻る」ボタンのための部分テンプレートを作成します。

$ edit app/views/tasks/_button_to_back.html.erb

<% form_for(@task, :url => [ :new, :task ]) do |f| %>
  <% [ :subject, :due_date, :done, :note ].each do |attr| %>
    <%= f.hidden_field attr %>
  <% end %>
  <%= f.submit '戻る' %>
<% end %>

---

newアクションを修正します。

$ edit app/controllers/tasks_controller.rb

  (省略)

  def new
    @task = Task.new
    @task.attributes = params[:task] if request.post?
  end

  (省略)

---

CSSを修正します。

$ edit public/styesheets/application.css

(省略)

div.buttonGroup {
  text-align: center;
}

div.buttonGroup form {
  display: inline;
}

(省略)

---

ウィザードっぽく見せるために、入力フォームの部分テンプレートを修正します。

$ edit app/views/tasks/_form.html.erb

(省略)

<div class="buttonGroup">
  <input type="button" value="戻る" disabled="disabled" />
  <%= f.submit f.object.new_record? ? '次へ' : '保存' %>
</div>

---

ブラウザで動作を確認します。

「次へ」ボタンをクリックします。

「戻る」ボタンをクリックすると…

本日はここまで。