STEP 6: レコードの編集

2010/02/02

今回は、タスクを編集する機能を作ります。


まず入力フォーム用のテンプレートを作るのですが、新規追加のコードとほぼ同じなので、コピーして修正することにします。

$ cp app/views/tasks/new.html.erb app/views/tasks/edit.html.erb
$ edit app/views/tasks/edit.html.erb

修正箇所は2箇所だけです。1行目

<h1>新規タスクの追加</h1>

を次のように変えます。

<h1>タスクの編集</h1>

それから、下から3行目

<%= f.submit '追加' %>

を次のように変えます。

<%= f.submit '保存' %>

2つのテンプレートがよく似ているときは、共通する部分を部分テンプレートとして抽出するといいでしょう。

部分テンプレート _form.html.erb を作成します。

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

new.html.erb の3行目以降をすべて切り取って、_form.html.erb に貼り付けます。

<% form_for @task do |f| %>

<%= f.error_messages %>

<table class="attributes">
  <tr>
    <th>件名</th>
    <td><%= f.text_field :subject %></td>
  </tr>
  <tr>
    <th>期日</th>
    <td><%= f.date_select :due_date %></td>
  </tr>
  <tr>
    <th>完了</th>
    <td>
      <%= f.radio_button :done, true %> Yes
      <%= f.radio_button :done, false %> No
    </td>
  </tr>
  <tr>
    <th>注記</th>
    <td><%= f.text_area :note, :size => '40x5' %></td>
  </tr>
</table>

<div class="submit">
  <%= f.submit '保存' %>
</div>
<% end %>

そして、下から3行目を次のように変更します。

  <%= f.submit f.object.new_record? ? '追加' : '保存' %>

new.html.erb を次のように変更します。

$ edit app/views/tasks/new.html.erb
<h1>新規タスクの追加</h1>

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

edit.html.erb を次のように変更します。

$ edit app/views/tasks/edit.html.erb
<h1>タスクの編集</h1>

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

タスク一覧ページに「編集」リンクを設置します。

$ edit app/helpers/tasks_helper.rb
module TasksHelper
  def operations_on_task(task)
    links = []
    links << link_to('編集', [ :edit, task ])
    links << link_to('完了', '#')
    links << link_to('削除', task, :method => :delete,
      :confirm => '本当に削除しますか?')
    links.join(' | ')
  end
end

修正箇所は4行目です。


Tasksコントローラにeditアクションを追加します。

class TasksController < ApplicationController
  (省略)

  def new
    @task = Task.new
  end

  def edit
    @task = Task.find(params[:id])
  end

  (省略)
end

ブラウザでタスク一覧ページを開き、「編集」リンクをクリックすると次のようなページが表示されます。

画面キャプチャ1


最後にTasksコントローラにupdateアクションを追加します。

class TasksController < ApplicationController
  (省略)

  def update
    @task = Task.find(params[:id])
    @task.attributes = params[:task]
    if @task.save
      redirect_to :tasks
    else
      render :action => 'edit'
    end
  end

  def destroy
    @task = Task.find(params[:id])
    @task.destroy
    redirect_to :tasks
  end
end

編集フォームの各フィールドを適当に変更し、

画面キャプチャ2

「保存」ボタンをクリックすると、

画面キャプチャ3

のように編集が完了します。