Backbone.js Railsで使えるGem

Backbone.jsで関連するモデルのREADとCREATE

投稿日:

 

ThoughtBotの本を読み進めてるけど私には買ってよかったと感じている

ゾンビviewのワナを回避する方法や細かい設定や意味は自分で試行錯誤していたら何時間無駄にするかわからなかった

マニュアルやソースだけだと全部平坦に書いてあるからどれが大事でとかわからないし、将棋でも金銀の動かし方を知ってても定跡を知らないと勝てないよね

準備

ModelとCollection

Articleモデル

Articlesコレクション

Commentモデル

Commentsコレクション

 Router

読み込み待ちの知恵

読み込み待ちの知恵として、前はコレクションのresetイベントを監視していたけど、fetchがsuccessするまで待つ方法をとってみた コレクションと関係ない初期描画がある場合ちょっと遅くなるかもしれない

あと、どのアドレスからもアクセスできるようにshowは@collectionを待たず、idからmodelデータをfetchして取ってくることにした

マニュアルには、collectionのurlを指定すれば、modelのurlは指定しなくていいって書いてあるけど、こういうcollectionからgetじゃない場合はmodelのurlRootを書いておく必要があった

READ

さて、showのメソッドでは個別記事とコメントを全部取得するようにJSONを決めた

これをArticleモデルと1対多の関係にあるCommentsCollectionに配置するには事前の準備が必要

こんな感じでattributesからcollectionプロパティにその都度移しておけばOK

これはThoughtBotの本に書いてあったやり方だ

ただ、複雑になるとBackbone-relationalを使ったほうがいいって

これで、上のrouterやその先のviewから

でプロパティのcollectionにアクセスできる

CREATE

書き込みをするにはコメントを投稿するAPIをつくったけど、articleはタイトルだけで内容をもってないので、最初のコメントとして記事の内容を投稿したい(2chの1みたいなイメージ)

そうすると記事の投稿と関連するコメントを一度に投稿できるとうれしい

まずRailsの側で準備が必要

これで accepts_nested_attributes_forで関連するモデルのattributesにアクセスできる

 

次にBackbone側

考え方としては、articleの下にcomments_attributesをくっつけたJSONをPOSTするようにすればいい

JSON化してるのはモデルかコレクションのtoJSONメソッドなのでこれをオーバーライドすればOK

今回はArticleモデルのtoJSONをオーバーライドする

でも、これだけじゃうまくいかない

なぜかというと上でもともとREADしてきたattributesにある方のcommentsをきちんと消してないから

silent:trueでこっそり消しておく

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

執筆者:

関連記事

Rails3.2でユーザー管理機能を追加~Devise

  前回 Rails3.2のアプリにユーザー機能を追加する~Devise サインアップ機能を削除したので、Railsからのユーザー管理機能を追加した 目次1 generate2 routes …

no image

Rails3.2でajaxなフォルダツリーを導入する3~dynatree-rails & jQuery UI dialog

  前回 Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails &nbsp …

Rails3.2でリアルタイムメッセージング~Private_pub、Faye

  Railsで簡単に非同期通信ができるPrivate_pubというgemを試した もともとrubyにはFayeという非同期通信ができるgemがあったが、簡単に安全な接続ができる実装を加えた …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

ElasticSearchをRubyから使う~elasticsearch-ruby

By: Harry Rose – CC BY 2.0 目次1 gem elasticsearch-ruby2 環境3 インスタンス作成4 メソッド一覧5 情報取得6 ドキュメントの作成7 …