rails3とbackbone.jsの組み合わせで利用する2

■概要

前回に引き続き、backbone.jsを利用してjqueryでMVCの世界を、rails3と共に作っていこうと思います。
今回はデータのやり取りをする所までが目標です。

■モデル/コントローラ等を作成する

$ rails g scaffold post title:string body:text published:boolean
$ rake db:migrate
$ rake spec (とりあえずrspecが動くか確認しとく)
$ rake spec:rcov (ついでにrcovが動くか確認しとく)
$ rails s

ここで http://localhost:3000/posts でいつもの画面が表示されてればOK!

■json入出力用にコントローラを修正する

とりあえずjsonでやり取りできるように変更します。params.exceptはbackboneとのやり取りを考慮してます。

class PostsController < ApplicationController
  respond_to :json
  def index
    @posts = Post.all
    respond_with @posts
  end
  def show
    @post = Post.find(params[:id])
    respond_with @post
  end
  def create
    @post = Post.new(params.except(:action, :controller))
    respond_to do |format|
      if @post.save
        format.json { render :json => @post, :status => :created, :location => @post }
      else
        format.json { render :json => @post.errors, :status => :unprocessable_entity }
      end
    end
  end
  def update
    @post = Post.find(params[:id])
    respond_to do |format|
      if @post.update_attributes(params.except(:id, :action, :controller, :created_at, :updated_at))
        format.json { head :ok }
      else
        format.json { render :json => @post.errors, :status => :unprocessable_entity }
      end
    end
  end
  def destroy
    @post = Post.find(params[:id])
    @post.destroy
    respond_to do |format|
      format.json { head :ok }
    end
  end
end

■jsonのフォーマットを変更する

このままだと下記の用に"post"が付いてしまうので、backbone側の期待と異なります。

http://localhost:3000/posts.json
=> [{"post":{"body":"a","created_at":"2011-01-19T16:13:47Z","id":1,"published":false,"title":"aa","updated_at":"2011-01-19T16:13:47Z"}}]

http://localhost:3000/posts/1.json
=> {"post":{"body":"a","created_at":"2011-01-19T16:13:47Z","id":1,"published":false,"title":"aa","updated_at":"2011-01-19T16:13:47Z"}}


config/initializers/include_root_in_json.rbの様なファイルを作成し

ActiveRecord::Base.include_root_in_json = false

とすると下記の様な感じでgoodです！

http://localhost:3000/posts.json
=> [{"body":"a","created_at":"2011-01-19T16:13:47Z","id":1,"published":false,"title":"aa","updated_at":"2011-01-19T16:13:47Z"}]

http://localhost:3000/posts/1.json
=> {"body":"a","created_at":"2011-01-19T16:13:47Z","id":1,"published":false,"title":"aa","updated_at":"2011-01-19T16:13:47Z"}

■backbone用のcontorollerを作成

コントローラ/ビューを追加して必要な設定を追加します。

$ vim controllers/home_controller.rb

class HomeController < ApplicationController
  def index
  end
end

$ vim config/routes.rb
  root => "home#index"
$ rm public/index.html
$ mkdir views/home

■backbone.jsを使ってみる

$ vim views/home/index.html.erb

http://localhost:3000/ を開いて、画面に味気ないalertが表示されればOkay!!
railsのログとDB見てると少しは楽しいかも

次は画面を作っていきましょう！