Rails3/Ajax の履歴差分(No.1)

• 履歴一覧
• 現在との差分 を表示
• ソース を表示
• 履歴 を表示
• Rails3/Ajax へ行く。
  • 1 (2013-06-04 (火) 04:50:46)

• 追加された行はこの色です。
• 削除された行はこの色です。

&tag(Rails3/Ajax);
*目次 [#y072c49a]
#contents
*参考情報 [#b923fdee]

*基本 [#e9cfb3a6]
-複数のファイルが連携するので直感的に分かりづらい。
-ビューの*.html.erbからajaxでコントローラー呼び出し→remote=true→コントローラーで処理→*.js.erb実行という流れになる。最後の*.js.erb実行時にhtmlを組み立てる必要がある場合、部品を部分テンプレートとして外出しにしてくのが基本パターン。


*Ajaxで時刻を書き換える [#n4b91baf]
**index.html.erb。リンククリックで現在時刻のdivの内容を書き換える。簡単なので部分テンプレートなし。 [#h3473e7b]
#pre{{
<div id='result'>現在時刻: <%= Time.now %></div>
<%= link_to '更新', {:action => 'upanel'}, :remote=>true %>
}}
** ajax_controller.rb [#jb0512bf]
-@timeに現在時刻を設定。
#pre{{
  def upanel
    @time = Time.now.to_s
  end
}}
**upanel.js.erb [#ucdfd795]
-jQueryを使って(Rails3の場合デフォルト有効)、resultを書き換えている(index.html.erbのdivタグ)。
#pre{{
$('#result').html(
  "<%= escape_javascript('現在時刻: ' + @time) %>"
);
}}