indexに編集フォームを埋め込み

app/assets/javascripts/memos.js.coffee

@@ -1,3 +1,17 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
+$ ->
+  $('#memos')
+    .on 'click', '.edit, .cancel', (event) ->
+      # 表示を切り替え
+      toggleEditor $(this).closest('.memo')
+
+# 表示モードと編集モードを切り替える。
+toggleEditor = ($container) ->
+  # 表示、非表示を切り替え
+  $container.find('.viewer, .editor').toggle()
+
+  # 編集モードなら、値を戻す
+  $bodyField = $container.find('.editor .body')
+  if $bodyField.is(':visible')
+    $bodyField
+      .val($container.find('.viewer .body').text())
+      .select()

app/assets/stylesheets/memos.css.scss

@@ -1,3 +1,8 @@
-// Place all the styles related to the memos controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+.memo {
+  border: solid 1px #eee;
+  margin: 10px;
+  padding: 10px;
+}
+.memo .editor {
+  display: none;
+}

app/views/memos/_form.html.erb

@@ -1,21 +1,4 @@
-<%= form_for(@memo) do |f| %>
-  <% if @memo.errors.any? %>
-    <div id="error_explanation">
-      <h2><%= pluralize(@memo.errors.count, "error") %> prohibited this memo from being saved:</h2>
-
-      <ul>
-      <% @memo.errors.full_messages.each do |msg| %>
-        <li><%= msg %></li>
-      <% end %>
-      </ul>
-    </div>
-  <% end %>
-
-  <div class="field">
-    <%= f.label :body %><br />
-    <%= f.text_field :body %>
-  </div>
-  <div class="actions">
-    <%= f.submit %>
-  </div>
+<%= form_for memo do |f| %>
+  <%= f.text_field :body, id: nil, class: 'body' %>
+  <%= f.submit 'Update' %>
 <% end %>

app/views/memos/index.html.erb

@@ -1,22 +1,21 @@
 <h1>Listing memos</h1>
 
-<table>
-  <tr>
-    <th>Body</th>
-    <th></th>
-    <th></th>
-    <th></th>
-  </tr>
-
+<div id="memos">
 <% @memos.each do |memo| %>
-  <tr>
-    <td><%= memo.body %></td>
-    <td><%= link_to 'Show', memo %></td>
-    <td><%= link_to 'Edit', edit_memo_path(memo) %></td>
-    <td><%= link_to 'Destroy', memo, confirm: 'Are you sure?', method: :delete %></td>
-  </tr>
+  <div class="memo">
+    <div class="viewer">
+      <span class="body"><%= memo.body %></span>
+      <%= button_tag 'Edit', class: 'edit', type: :button %>
+    </div>
+    <div class="editor">
+      <div>
+        <%= button_tag 'Cancel', class: 'cancel', type: :button %>
+      </div>
+      <%= render 'form', memo: memo %>
+    </div>
+  </div>
 <% end %>
-</table>
+</div>
 
 <br />