環境
- Rails 4.2.0
サンプル
（参考）RAILS 4.0の変更点を、サンプルアプリケーションを作りながら確認する。 リンク切れのようです。
製品一覧
製品の足場を作成、製品は名称と価格を持つ。
rails _4.2.0_ new store
cd store
rails g scaffold product name price:integer
rake db:migrate
ルートのルーティングを製品一覧に設定する。
config/routes.rb
root 'products#index'
コントローラーなどの確認。製品を新規作成、編集する。
view app/controllers/products_controller.rb
view app/views/products/index.json.jbuilder
rails s
製品にリリース日を追加する。
rails g migration add_released_on_to_products released_on:date
rake db:migrate
rails s
ビューにリリース日を追加してもStrongParametersにより保存されない。
scaffold_controllerで衝突するファイルの差分を確認する。
rails g scaffold_controller product name price:integer released_on:date
製品名で検索
名前が部分一致した製品を表示する。
app/models/search_form.rb
class SearchForm
include ActiveModel::Model
attr_accessor :q
end
検索フォームを追加する。
app/views/products/index.html.erb
<%= form_for @search_form, url: products_path, html: { method: :get } do |f| %>
<%= f.search_field :q %>
<%= f.submit '検索' %>
<% end %>
<h1>Listing products</h1>
app/controllers/products_controller.rb
class ProductsController < ApplicationController
before_action :set_product, only: [:show, :edit, :update, :destroy]
# GET /products
# GET /products.json
def index
@search_form = SearchForm.new params[:search_form]
@products = Product.all
if @search_form.q.present?
@products = @products.named @search_form.q
end
end
app/models/product.rb
class Product < ActiveRecord::Base
scope :named, ->(q) { where 'name like ?', "%#{q}%" }
end
検索をAjax化
全製品がテーブルで用意されている画面について、検索結果を受けて、項目行を表示／非表示する。
検索条件を入力、製品一覧を Ajax 呼び出し、JSONフォーマットで結果を取得、該当する製品を表示する。
まず、content_tag_for を用いて <tr> に ID を追加し、項目行を指定可能にする。
app/views/products/index.html.erb
<tbody>
<%= content_tag_for :tr, @products do |product| %>
<td><%= product.name %></td>
<td><%= product.price %></td>
<td><%= product.released_on %></td>
<td><%= link_to 'Show', product %></td>
<td><%= link_to 'Edit', edit_product_path(product) %></td>
<td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
<% end %>
</tbody>
Ajax化した検索に成功した場合、検索結果（引数 products）に含まれる ID だけを表示する。
app/assets/javascripts/products.coffee
ready = ->
$('#new_search_form').on 'ajax:success', (event, products, status) ->
$('tr.product').hide()
ids = (products.map (p) -> "#product_#{p.id}").join(',')
$(ids).show()
$(document).ready(ready)
$(document).on('page:load', ready)
検索結果（JSONフォーマットで呼ばれた場合）として、product の ID を返す。
app/views/products/index.json.jbuilder
json.array!(@products) do |product|
json.extract! product, :id
end
Ajax を用いて製品一覧を検索する。（ /products.json にアクセス）
app/views/products/index.html.erb
<%= form_for @search_form, url: products_path(format: :json), html: { method: :get }, remote: true do |f| %>
（参考）rails consoleで app.products_path(format: :json) と入力すると、展開されたパスを確認できる。