RubyOnRails

Rails3部分テンプレートとAjax化のまとめ

投稿日:

参考

guides.rubyonrails.org/layouts_and_rendering.html#using-partials

また混乱したので公式を参考にして書き直しました

部分テンプレート

部分テンプレートはいわゆるpartialっていうんだけど、いくつかあるビューのうち共通部分を部品化して、部分テンプレートにすることで再利用できる仕組み

例えば、scaffoldで作ったときの_form.html.erbは部分テンプレートだ

これはAjax化(画面遷移なしで画面を書き換える)するときにもjQueryを使って部分テンプレートを呼び出すので、部分テンプレートの利用がほぼ必須になる

けれど、この部分テンプレートが自分にはわかりにくい

わかりにくいのは省略のルールが重なっているからだと思うので、もう一回おさらいしておく

部分テンプレートの名前

これで_menu.html.erbを描画する.このアンダースコアの省略はほかのディレクトリを参照するときも変わらない.

この場合はapp/views/shared/_menu.html.erbを引っ張ってくる

部分テンプレートを単純なビューに使う

部分テンプレートの使いドコロの1つは単純な使い回しとして使う場合

これはほかのページと共通するような部品を使うような場合便利

部分テンプレートのローカル変数に値を渡す

これで_form.html.erbはzoneをローカルで使える

部分テンプレートにオブジェクトを渡す

また全ての部分テンプレートは自分と同じ名前(アンダースコアは省く)のローカル変数をもっている

オブジェクトをこのローカル変数に渡すことができる

この場合、customerテンプレート内ではcustomer変数は@new_customerを参照することができる

以前のバージョンのRailsではこのデフォルトのローカル変数はパーシャルの親の中で同じ名前のインスタンス変数を探しにいったが、この振る舞いはRails3.0で取り除かれた.

便利な省略形

テンプレートに渡すオブジェクトがコントローラーのインスタンス変数(@〜〜〜〜)に設定されていて、そのインスタンス変数の名前が部分テンプレートと同じ場合にはオブジェクトの部分も省略できる

この場合、@customerがCustomerモデルのインスタンス変数を含んでいて、これは_customer.html.erbを使って、その部分テンプレートの中ではcustomer変数は親の@customerを参照する

コレクションを渡す

部分テンプレートが複数形のコレクションから呼ばれた場合、コレクションの中の個別のインスタンスが部分テンプレートに呼ばれる変数となり、この場合では、_production.html.erbのなかで、productとして個々のインスタンスにアクセスできる

さらにインスタンス変数でその単数形がテンプレート名と同名のコレクションを与える場合は省略が可能である

 

特殊な部分テンプレート

コレクションを与えるときspacer_template:を指定することで部分テンプレートが連続する間に挿入する線などを部分テンプレートで与えることができる

<%= render partial: ‘テンプレート名’, collection: @++++++s, spacer_template: ‘spacer’ %>

*省略できない!!

 

Ajax化

通常のRailsの処理は、railsが受け取ったアドレスをroutes.rbにしたがって、コントローラーとアクションを指定する。コントローラーはモデルへ情報を読み書きしたり、セッション情報の読み書き(session[])、フォームからの情報(params[])を使って、erubisという仕組みを使ってテンプレートとインスタンス変数(@)からhtmlを生成する

このとき生成するのはhtmlに限らなくて、txtやメール、json、cssなども生成できる

アクションはとくに指定がない限り、コントローラーの単数形のフォルダのviews/からアクション名と同名のテンプレートを探す

例えば、アクションがindexならば、index.html.erbを利用する

そうすると、Ajax化には、大きく分けて、RailsをAPIとして利用してクライアントのjavascriptからjsonで会話する方法とrailsでjavascriptファイルを生成してjQueryで画面を書き換える方法が考えられる

複雑なjQueryプラグインを使う場合、例えばMercuryEditorとかDataTablesを使うときは前者だけど、簡便なのは後者の方法だ

やり方は簡単で、formでremote: trueのオプションを指定して、対象のアクションには「アクション名.js.erb」というテンプレートを準備する

そうすると、Railsは画面遷移なくjavascriptファイルを生成してブラウザで実行してくれる

あとは、jqueryを使えば簡単

エスケープを忘れずに

この場合、renderの中に”という文字が含まれていたとするとエスケープを忘れると、誤動作する

 

-RubyOnRails
-,

執筆者:

関連記事

no image

Railsで2ch風掲示板を作ってみた

  今年のGWに作った動画です Railscastsとドットインストールに触発されてチュートリアルみたいなものを作ってみたくてやりました 途中で辞めてしまいましたが Ruby on Rail …

githubライクなuiを持つgitlabを試す

  gitoliteリポジトリをバックエンドにしたrails製でgithubライクなweb uiを持つgitlabを試してみた 環境 ubuntu server 12.04.1 目次1 準備 …

KEN_ALL.CSVを使ってRailsで郵便番号を検索するサイトを作る1

  放置しっぱなしだったKEN_ALL.CSVで簡単に郵便番号を検索できるサイトを作ってみた 参考 KEN_ALL.CSVを使える形にする 郵便番号データダウンロード 目次1 KEN_ALL …

Backbone.jsからRails3.2へのPUTに対して204(no content)が返ってくる問題

By: Bernardo Chang – CC BY 2.0   UPDATEするときRailsはデフォルトでJSONには何も返さないのがデフォルトぽい [crayon-58b2 …

erbで要素のidやclassを指定するならcontent_tag_forとdiv_forが便利だった