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

執筆者:

関連記事

no image

Rubyでffmpegのラッパーを使う~streamio-ffmpeg

  github.com/streamio/streamio-ffmpeg rubyでffmpegが扱える高機能ラッパー 導入 [crayon-5a5e9d3458571384151002/ …

docx生成アプリのサンプルを公開~simple_docx_generater

自作gemを使ったRailsアプリの作成例を公開しました!   サインインの情報はつぎのとおりです テンプレートの登録・編集権限のあるマネージャー manager1@example.com

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …

Yeomanで最新のJavaScript開発環境を最速で整える

環境 mac OSX Lion Yeomanは最新のJavaScript開発のための統合環境を提供してくれます yeoman.io/index.html 紹介動画 目次1 インストール2 さっそくアプ …

no image

kaminari + Twitter Bootstrap2テーマでFirst,Prev,Next,Lastだけおかしい場合

前につくったTwitter Bootstrap2用のkaminariテーマをコピーして使おうとしたら表題の通り、First,Prev,Next,Lastがおかしい あと…も表示されない G …