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
-,

執筆者:

関連記事

Rails4.1で全文検索〜rroonga

By: Vinoth Chandar – CC BY 2.0 目次1 RailsでGroongaを使う選択肢2 サンプルのアプリ3 Gemfile4 データベースへの接続5 スキーマの設定 …

no image

Rails3.2でテーブルの並び替えをリファクタリング~ヘルパー

環境 Rails3.2.8でテーブル並び替えのテストを作る~cucumberと正規表現 テストができたのでHelper化 目次1 現状2 helper3 index.html.erb 現状 共通部分が …

Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize

  d3.jsにはlayoutというおおまかに準備されたレイアウトがあって、その中にあるTreeレイアウトを試してみることにした d3.js自身のapiリファレンスが階層構造になっているので …

Rails3.2でdocxを作成

  途中経過 github.com/jawspeak/ruby-docx-templater これを試してみた まずローカル環境にgemをダウンロード [crayon-599da27a705 …

RailsでこんにちはBackbone.Marionette

By: palindrome6996 – CC BY 2.0 自分の中でmarionette熱がだんだんと高まりつつあり、特徴的なItemView、CollectionView、Compo …