読者です 読者をやめる 読者になる 読者になる

ここにタイトルが入ります

デザイン&プログラミングのことも書くし、それ以外のことも書く。

【Rails】検索結果をViewの中に埋め込みたい → partial使えばよろし

ruby Rails

あの、ずっと悩んでました…
ここ2週間くらい。
すごい簡単なことなのですがぁ。


私がやりたかったのはですね、検索を実行すると取得結果を含めそのページを再描画すること。

画面イメージ
f:id:blog_711fumi:20120321001859p:plain

ただ単に、検索ページ(templete)の中に結果表示ページが含まれているだけなので、
viewの中に「yield」と書いて取得情報部分を埋め込んでやればいいだけじゃないか、と思っていました。

で、検索結果を取得して描画するコントローラー&ビューを作ってyieldで埋め込み…てやってたんですが、
外枠の検索ボタンを押して結果を取得、画面全体を再描画しても
取得した値はもうどっか行ってて表示されない、みたいな…
(超意味不明ですみません…)

ずーっと悩んだ挙句、
部分テンプレート「partial」使って取得情報を埋め込んであげよう
という結論に至りました。


〜参考になりました!!〜
Ruby On Rails ピチカート街道 - partial パーシャルな関係【partial と object】 -
floatingdays: Railsで Viewの partialにデータを渡す方法
renderメソッドの使い方をマスターしよう(中編) Ruby on Rails Pro


頭にアンダースコアがついたテンプレートは部分テンプレートだと認識されます。

そこで、app/views/search以下に

  • index.html.erb → 外枠(青い部分)
  • _result.html.erb → 部分テンプレート(紫の部分)

という2つのViewテンプレートを作成します。

_result〜の中に

<%= @result %>

のような@resultを表示するコードが書いてあったとします。

検索ボタン(go!)を押されたときの処理で、取得情報を@resultにセットし、index〜の中から

<%= render(:partial => "result", :object => @result) %>

のように値(@result)を渡して部分テンプレートを描画することで、取得情報を表示することができます。

要は外枠(検索機能)で行った処理結果を別のテンプレートで表示させるには、
結果を中に持っているテンプレートに渡さなきゃいけないってことで
上記のような方法をとったのですが、
なんかしっくりこない…

なんとなく画面(というか役割)の切り分けが悪いような…
う〜ん。


いつもですが今回は特に公開できるようなまとまった文章になってないですね。

今後UIの構成(段組みとか)の考え方とRailsでの実装方法みたいなのが自分の中で整理できたら
またブログにまとめておきたいです。

ちょっとViewに関して混乱中ですー


2012/3/28追記 Ajaxで部分テンプレートを適用

Ajaxを使って書き直しました。
自分のミスのせいでまた修正に時間を取られてしまった…


〜参考にさせていただきました!!〜
Rails -Ajax- - FaithusMemo


index.html.erbにですね、検索を実行するためのformタグが埋め込んであります。
そのパラメーターに「remote: true」を追加することで非同期でjsを取得・実行できるようです。

↓こんな感じ

<%= form_tag({ action: :get_info },  remote: true ) do %>
  <%= text_field 'search_keys', 'name' %>
  <%= submit_tag "go!" %>
<% end %>

あとその下に検索結果を表示する部分を設けておきます。

<div id='search_result'>
</div>


この例では、「go!」ボタンが押されるとコントローラーの「get_info」メソッドが呼ばれることになります。
アクション名と同じ名前のjsファイルを用意しておくと、その時にそのjsがクライアントに返されるようですたぶん。


app/views/search/get_info.js.erb

$('#search_result').html("<%= j(render(:partial => 'wikipedia', :object => @wiki)) %>")

search_resultに部分テンプレートを表示するよう書いてます(JQuery)


これでAjaxを使って部分更新することができました。

2012/4/1 更に追記

これ(rubyのコードを裏でjsにしてくれている)のことをRJSというんですね…
言葉すら知らなかったのでメモ。。