131216_03：アジャイル開発本
第11章
タスクF：Ajaxの追加
この章でやること
- 部分テンプレートの使用
- ページレイアウト内のレンダリング
- AjaxおよびJavaScriptを使ったページの動的な更新
- jQuery UIを使った変更内容の強調表示
- DOM要素の非表示および表示
- Ajaxの更新のテスト
部分テンプレート
Railsの部分テンプレート（partialと略されることも）は、ビューで使うメソッドのようなものだと考えられる。部分テンプレートとは、ビューの一部を専用のファイルに収めたもの。別のテンプレートやコントローラから部分テンプレートを呼び出す（レンダリングする）ことができ、部分テンプレートは自身をレンダリングして結果を返す。メソッドのように部分テンプレートにパラメータを渡すこともできる。
app/views/carts/show.html.erbでカート表示を書き換え。
<table>
<%= render(@cart.line_items) %>
<tr class="total_line">
<td colspan="2">合計</td>
<td class="total_cell"><%= number_to_currency(@cart.total_price) %></td>
</tr>
</table>
部分テンプレートをapp/views/line_itemsに_line_item.html.erbという名前で配置
<tr>
<td><%= line_item.quantity %>×</td>
<td><%= line_item.product.title %></td>
<td class="item_price"><%= number_to_currency(line_item.total_price) %></td>
</tr>
品目に部分テンプレートを使ったので、カートでも同じことをする。
app/views/carts/_cart.html.erbを追加
<div class="cart_title">カート</div>
<table>
<%= render(cart.line_items) %>
<tr class="total_line">
<td colspan="2">合計</td>
<td class="total_cell"><%= number_to_currency(cart.total_price) %></td>
</tr>
</table>
<%= button_to 'カートを空にする', cart, method: :delete,
confirm: '本当によいですか？' %>
元のテンプレートを、部分テンプレートをレンダリングするコードに置き換え。
app/views/carts/show.html.erbを編集
<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<%= render @cart %>
次にアプリケーションのレイアウトを変更してサイドバーに新しい部分テンプレートを組み込む。
<div id=r"cart">
<%= render @cart %>
</div>
次に、storeコントローラにちょっとした変更を加える。
app/controllers/store_controller.rbを編集
@cart = current_cartを追加（line4）
最後にスタイルの指示をサイドバーに出るテーブルにも適用されるように変更。
app/assets/stylesheets/carts.css.scss
.carts, #side #cart {
に編集（line5）
緑の背景に黒い文字はあまり読みやすくないので、このテーブルがサイドバーに出るときのルールを追加。
app/assets/stylesheets/layout.css.scss
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
form, div {
display: inline;
}
input {
font-size: small;
}
#cart {
font-size: smaller;
color: white;
table {
border-top: 1px dotted #595;
border-bottom: 1px dotted #595;
margin-bottom: 10px;
}
}
ページ遷移の変更
サイドバーにカートを表示できたので、カートに入れるボタンの動作を変更する。
変更はとてもシンプルで、createアクションの最後でブラウザをインデックスページにリダイレクトさせる。
app/controllers/line_items_controller.rbを編集（line59）
format.html { redirect_to store_url }
