Backbone.js Railsで使えるGem

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

投稿日:

 

はじめに

backbone-railsのscaffold generatorはRailsと同じ見た目で動くコードを生成してくれるのでページ遷移の仕組みとCRUDの視点から、そのコードを読んでみた

 

github.com/codebrew/backbone-rails

紹介ビデオ

 

別の同名のgem

github.com/aflatter/backbone-rails

いつも使ってるbackbone-on-rails

github.com/meleyal/backbone-on-rails

 

How is this gem different to backbone rails?

 

サンプルの準備

公式のREADMEどおりのサンプルをつくった

初期化

backbonejs.org/#FAQ-bootstrap

初期モデルの読み込み

 

公式のFAQにあるとおり最初はfetchからやるより、JSONをresetする方がいいってやつか

ルーター

リンクからの遷移(ejs)

ejsはerbを意識したJavaScriptのテンプレート

Backboneの認識するルーティングは#以下なので注意

例えば、indexは/posts#/index

ふつうに#ホニャララでaリンクをクリックしてもらえばルーターが作動する

スクリプトからの自動遷移

ここではwindow.location.hashを使ってる これでもルーターが作動する

jQMを使うときは、ここのwindow.location.hashを$.mobile.ChangePageに変えればいいのかな

 

READ

特にへんてつもない

Viewにはmodelとcollectionしか渡せないのかと思ってたけど、@options以下に入るのか

(上のルーターでindexにはpostsで渡しているけど、ほかのviewにはcollectionとmodelという名前で渡している。)

backbone_rails_sync.js

ところで、このgemはbackbone-on-railsと違って、2つのライブラリを含んでいる

backbone_rails_sync.jsbackbone_datalink.js

backbone_rails_sync.jsはbackbone.syncを書き換えていて、RailsのCRSF対策に対応してSyncしてくれる

まあイシューには問題も報告されてるみたいだけど

もう1個はあとで

*補足

とすると、backbone-on-railsはcsrf対策していないのか!?

でも、たしかRails 3.0.4と2.3.11からXHRリクエストの際もCSRFトークンの検証が必須になったので注意とか言ってたような気がしたけど??

と思って調べてみたら、jquery_ujsというRailsのデフォルトのライブラリでcsrfのメタタグを読み込んで$.ajaxのときにcsrfタグをつけて送信する処理があるっぽかった

FireBugのネットワークでbackbone-on-railsのajax通信を読んでみるとちゃんとcsrfタグをつけて送信していた

jquery-ujs.js(rails.js)便利だよって話

ただ、Backbone自体はunderscore.jsだけに依存していてjQueryには依存していないって言ってるので、将来的にBackbone.syncが$.ajaxを使わなくなるかもしれない.そうなったらRailsで使う場合はCSRF対策を書かないといけなくなる.

Backbone.jsのAjaxについて

backbone.localstorage.jsとBackbone.Syncのお話

CREATE

ちゃんと失敗した場合のエラーメッセージをとったり、コンストラクタを上書きして、参考になる

Railsのモデルにバリデーションがかかってるときとかはエラーが返ってくるので(これはRailsCastsのほうにあった)

あと、preventDefault()とstopPropagation()でボタンによる誤作動を防止している

renderのところでbackboneLinkという見慣れない関数が出てくる

これがさっきのbackbone_datalink.jsで拡張したjQueryの関数で、inputタグのnameをみて、それと同じ名前でモデルのプロパティに値をSet/Getしてくれるみたい

これはRailsぽい

 

UPDATE

これはこの前つくったカレンダーのやつと違ってNEWとUPDATEのViewとテンプレートを分けている

見本ていう意味あいもあるから分かりやすさを重視したのかも

 

 

DELETE

上のルーターをみるとわかるけど、destroyはルーティングされてない

でも、indexのdestroyのアドレスは#<%= :id %>/destroyになってる

どういう仕組みかというと、destroyっていうクラスをくっつけているのがミソで

postのviewにdestroyっていうクラスをクリックしたら削除っていうイベントが仕掛けてある

destroyメソッドの件はこれに関係してると思う

Destroying a Backbone Model in a Collection in one step?

 

コレクションとモデルの関係はなかなか面倒くさい難しい

とりあえずCREATE、UPDATE、DELETEのときにどうやって書くかの典型パターンだけ理解しておきたい

Thoughtbotの本ほしいけど・・・

 

-Backbone.js, Railsで使えるGem
-,

執筆者:

関連記事

RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails

環境 ruby 1.9.3  & rails 3.2.8 適当なscaffoldを作っておく

  github.co …

Rubyで静的ページをジェネレート〜middleman

静的ページのジェネレータとしてはjekyllやこれを使ったoctopressなどがメジャーなようで middlemanもそんな静的なページのメジャーなジェネレータの1つ middlemanの利点は次の …

no image

Ruby on Rails 3.2でファイルアップロード〜CarrierWave & RMagick

    CarrierWaveはRubyでファイルのアップロードを簡便にするGemです。 RMagickはImageMagickという画像ファイルを加工するソフトのラッパーです。C …

no image

Railsで動画を管理する2 動画のサムネイルを作成する~CarrierWave + Flowplayer

  *とりあえず動いているけど、もっとましな方法があるとおもいます 前提 Railsで動画ファイルを管理する~CarrierWave Flowplayer 参考 Rubyでffmpegのラッ …

Rails3でECサイト構築8 都道府県の登録~spree

  都道府県の登録を忘れていた seedを追っていくとわかるのだけど、rake db:load_file[tablename.yml, dir]で登録できる サンプルは、spree_core …