Rails 3チュートリアルシリーズの9:Rails 3入門(8,完結編)

前の8つの文章の学習を通じて、私たちは基本的にどのように簡単なブログアプリケーションを迅速に開発するかを掌握して、本章は入門の完結編として、私たちはブログにujsを加えて、私たちのブログにajax効果を少し加えます.
 
Unobtrusive JavascriptのフルネームはRails 3の重要な特性の一つである.Rails 3のujsはHTML 5のdata-*@属性の巨大な優位性を利用して、以前Prototype JSに基づくコンストラクタを捨てた.(rails 1およびrails 2ではajaxを使用するとxxx.rjsまたはxxx.js.builderを使用する可能性があり、prototypeをカプセル化したPageオブジェクトを使用することができます)
 
1.Rails 3にjQueryを使用させる
軽量級jsフレームワークjqueryは皆さんがきっと見慣れないと信じています.このチュートリアルのujsチュートリアルもjqueryに基づいて書いています(もちろんprototypeも使えます).
まず、最新のjqueryをダウンロードしてpublic/javascriptsフォルダの下に入れます.
 
$ curl -L http://code.jquery.com/jquery-1.4.3.min.js > public/javascripts/jquery.js
 
元のprototype ujsのrailsも必要ですjsをjquery-ujsのrailsに変更する.js:
 
$ curl -L http://github.com/rails/jquery-ujs/raw/master/src/rails.js > public/javascripts/rails.js
 
ダウンロード後javascriptsフォルダを見ることができ、中にはアプリケーション、controls、dragdrop、effects、jquery、prototypeおよびrailsなどのjsファイルがあり、jquery以外はbolgアプリケーションを生産する際にrailsが追加する.
 
次にconfig/アプリケーションを開きます.rbファイル、次の構成を変更します.
 
 

# JavaScript files you want as :defaults (application.js is always included).
    config.action_view.javascript_expansions[:defaults] = %w(jquery rails)

 
上のコードはrailsに教えて、:default記号の定義は今jqueryとrailsに変えて、私達のブログプログラムを起動して、ソースコードの中のの中のがこの3つのjsスクリプトかどうかを見ます.
 
2.コメントにujsを付ける
ユーザーがコメントを発表すると、ブラウザはページをリフレッシュすることが多いため、ajax方式でコミットすることでローカルリフレッシュを実現することができ、データのインタラクティブなオーバーヘッドを回避し、顧客体験を増加させることができる.
 
ここでviews/comments/_を変更します.form.erb:
 

<%= form_for([@post, @post.comments.build], :remote=>true) do |f| %>
...

 
:remote=>trueは、xmlhttprequest方式でデータをコミットするrailsに通知する.
 
次に、CommentsControllerの次のcreateアクションを変更します.
 

class CommentsController < ApplicationController
  before_filter :authenticate, :only => :destroy
  respond_to :html, :js, :xml
  
  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.build(params[:comment])
    respond_with @comment if @comment.save
  end

  ...
end

 
以前のチュートリアルのrespond_を覚えています.to声明ですか?コメントの保存に成功すると、railsはcreateが存在する場合、対応するテンプレートを探します.html.erbはhtmlをレンダリングし、createが存在する場合.js.Erbはjsをレンダリングする.
 
ではviews/comments/の下にcreateを作成できます.js.Erbテンプレート:
 

$('#comments').append("<%= escape_javascript(render @comment) %>"); //    _comment     
$('#comment_body').val(""); //     

 
よく知ってる?はい、完全にjqueryの書き方ですが、escapeを使っています.JAvascriptは、タグのないコードを生成する.
 
今、Posts/次のshowを修正する必要があります.html.Erbテンプレート:
 

<h2>Comments</h2>
<div id="comments">
    <%= render @post.comments %>
</div>

 
 
さあ、今やってみましょう.
 
3.記事とコメントの削除
最後にpostの削除とコメントにujs効果を加えてみましょう.
posts/index.html.erb:
 

<% @posts.each do |post| %>
  <tr id='<%= "post_#{post.id}" %>'>
    <td><%= post.name %></td>
    <td><%= post.title %></td>
    <td><%= post.content %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete, :remote => true %></td>
  </tr>
<% end %>

PostsController#destroy:
   def destroy

    @post = Post.find(params[:id])
    @post.destroy
    respond_with(@post)
end

 
views/posts/destroyを追加js.erb:
 

$('#post_<%= @post.id %>').hide(); //隐藏删除的记录.

 
最后の削除コメントは皆さんに残しておきましょう:)
 
すべてのRails 3の入門は今正式に終わりました.後のチュートリアルでは、Rails 3の各モジュールを重点的に勉強します.視聴してくれてありがとう.