農作業の記録に使える作業日誌アプリを製作中です。
その日にやった作業の詳細をテキストエリアに入力する際に、
事前に作業ごとのテンプレートを制作しておいて、
プルダウンリストでそのテンプレートを呼び出せるような機能の実装を考えていました。
この部分をAjax処理にしたので、その実装のやり方を思い返しながらまとめておきたいと思ったのですが、
まずは前段としてcollection_selectの使い方を整理しておきます。
その日にやった作業はWorkモデル、テンプレートは独立したTemplateモデルに格納されます。
プルダウンリストの作成はcollection_selectヘルパーメソッドを使用して、Templateモデルの一覧を取得し、テンプレートのnameカラムをリストに表示させます。
(この時点ではまだ特に選択したテンプレートの表示や保存は行われません。ただプルダウン上でテンプレートを選択するだけです)
このようなワーク入力画面で、「詳細」の下のプルダウンリストをクリックすると…
2.テンプレートの名前リストが表示されるので、好きなのを選んで選択する。
該当するフォーム部分の上にプルダウンリストを以下のように記述しました。
views/works/form.html.erb
<label>詳細</label>
<%= collection_select(:template, :name, templates, :id, :name, {:include_blank => true}) %>
<%= form.text_area :body, :size => "40x10" %>
2行目のcollection_select
で、Templateモデルの一覧を取得し、テンプレートのnameカラムをリストに表示させています。
これはviews/works/new.html.erbとedit.html.erb
のフォーム部分をパーシャルにしている状態です。そこの際に変数を受け渡ししてるので、@templatesというインスタンス変数だったのが、ローカル変数として渡されています。
(パーシャルにインスタンス変数は使わないのが基本と学んだ)
ちなみに該当するworksコントローラーのnewアクションの中身は以下のようになっています。
controllers/concerns/works_controller.rb
def new
@diary = Diary.find params[:diary_id]
@work = @diary.works.build
@templates = Template.all
end
collection_selectの引数がちょっと複雑。
参考リンク1がとっつきやすい感じで整理してくれているのですが、その中では
collection_select(オブジェクト名, プロパティ名, オブジェクトの配列, value属性の項目, テキストの項目 [, オプション])
と書かれています。僕の書いたコード
collection_select(:template, :name, templates, :id, :name, {:include_blank => true})
と照らし合わせてみると、
form_with
と関係なく独立しているのでこれで良いのですが、例えばform_with
の中でf.collection_select
とかform.collection_select
みたいに使うケースでは、すでにオブジェクトを受け取っているのでここは省略しないとエラーになってしまうようなので注意が必要そうです。Template.all
が配列となって入ります。コントローラーの方で@templates = Template.all
を記述しているので、それが渡ってきています。 <select>
タグで使う<option>
タグのvalue属性に該当するようなのですが、もうちょっとこの辺の理解が必要そうです。{:include_blank => true}
で先頭に空白行を追加しています。これがなければテンプレートの1番目が初期値として選択されている感じでしょうか。ちょっと理解が危うい部分があるのですが、
今後またこのプルダウンリストを実装するタイミングが近々あるので、復習しながら理解していきたいと思います。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント