Backbone.js Railsで使えるGem

backbone-relationalで関連するコレクションをRails3.2のAPIに投稿〜accepts_nested_attributes_for

投稿日:

 

backbonerelational.org/

Backbone-relationalを使って関連するコレクションをまとめてセーブする話

例えば、タグとか

この場合はレシピの投稿サイトを作っていて、それぞれのレシピがステップをたくさん持っている

そのレシピと複数のステップを一度の通信でセーブしたい

サーバーサイドの設定

ポイントはaccepts_nested_attributes_forを設定するとRecipeモデルの方からStepモデルのattributesが扱えるようになること

そして、JSONで通信するときは、関連するStepモデルのkeyに”steps_attributes”と名付けなければならないこと(変更できるか不明)

ともかく、これにあうJSONをクライアントサイドで作って投稿する

クライアントサイド

Modelの設定

関連性の設定はこれ

ポイントはkeyをそのままずばり “steps_attributes”にしたこと

もう1つはincludeInJSONの設定で送信する要素を絞り込んだこと

どういうことかというと、includeInJSONは関連するモデルやコレクションをJSONで一緒に出力するかどうかを選択するオプションだけど

このオプションがtrueだとなるべくたくさんのattributesを送ろうとする

そうすると、stepはさらに関連する自分自身まで送ろうとするので、RailsでMassAssignmentSeccurity::Errorを吐かれる

何を言ってるのかわからないと思うが、要するに、下のパラメータで "steps_attributes"=>[{"label"=>"3", "recipe"=>nil}] のrecipeを取り除いてやればOKってこと

で、この場合は”label”だけ送りたいので、 includeInJSON: ["label"] と設定すればOK

*原因はreverseRelationの設定でした

もし、reverseRelationを使わないのであれば、この設定を削除すればrecipeを送りません

View

とにかく、ボタンを押したときに存在するフォームから値を取得して関連するモデルにまとめていけばいい

このへんは洗練されていない

 

フォームの要素を足したり引いたり

これを利用すれば、フォーム要素を動的に自由に足したり引いたりできる

Railsでもできるけど、割りと面倒くさい感じ(RailsCastsをそのまま写せばいいんだけど)

Backboneなら簡単にできる

まず親フォームにaddするaリンクを作る

次にイベントを設定

 メソッドでフォーム要素を追加

下のViewクラスはふつうに

RemoveはCompositeViewのleave()メソッドを使えばOK

 

参照

backbone-relationalをJasmineでテストしてみた

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

 

*追記 Rablで書く場合

読み込みの方なんだけど、Backboneの関連性を~_attributesで決めてしまった場合は設定でこちらも揃えることができる

 

* ArgumentError (Hash or Array expected, got NilClass (nil)):

relationを設定したけど関連するモデルはまだないとき、そのままpostするとサーバーエラーが出た

postしてる方は空の[]を投げてるつもりだけど、サーバーはnilって解釈してハッシュかアレイをよこせって言われる

なにか設定があるのかわからないけどtoJSONをオーバーライドして対処した

 

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

執筆者:

関連記事

Rails3でajaxでD&Dでまとめてファイルアップロードをスクラッチで~jQueryFileUpload for Rails

参考 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Rails3でajaxでD&Dでまとめてファイルアップロード2 …

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

  jQuery UIのプラグインdynatreeをRailsで使ってみた github.com/glebtv/dynatree-rails wwwendt.de/tech/dynatree …

no image

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

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

Backbone.jsでViewのrender前後にコールバック処理を追加する

By: Michael Gil – CC BY 2.0 afterRender() callback in Backbone.js Views [crayon-5ce159888a1179 …

no image

CarrierWaveのファイルをpublic以外に移す

  参照 How To: Secure Upload 現状でCarrierWaveのファイルがpublicという公開フォルダに置かれるのが気になったので調べてみた 違ってるかもしれないので自 …