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のproduction環境で動画再生~flowplayer+carrierwave+nginx+unicorn

  By: Creative Tools – CC BY 2.0 目次1 前提2 unicornの設定3 nginxのインストール4 nginxの設定5 アセット関係6  ストリ …

no image

Private_pub(Faye)の管理にForemanを使う~Foreman & Upstart

foremanはFayeサーバーのようにRailsのサーバーとは別プロセスで動くサーバー類をまとめて管理するgemだ 参考 railscasts.com/episodes/281-foreman?la

もしもRails3.2とBackbone.jsでリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …

no image

Rails3でTwitter Bootstrapのサーチフォームを実装する~form_tag

目次1 git & gitolite2 仕組みを考える3 フィーチャの作成4 Viewの作成5 Controllerの作成6 Modelの作成7 テストが通らない!8 mergeして終わり g …

Rails4とD3.jsでローソク足グラフを描く〜d3.js編

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 目次1 jsonデータ2 y_scaleを考える3 始値と終値から箱をつくる4 高値と安値でひげをつくる5 y_axisをつけ …