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.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder

    HTML5ではブラウザからユーザーのPCの位置情報を取得することができるGeoLocation APIというものがある (もちろんデフォルトではユーザーに確認をする設定にな …

Rails3.2でJasmineをつかってBackbone.jsのViewをテストしてみる

  By: Bering Land Bridge National Preserve 前回 Rails3.2でJasmineをつかってBackbone.jsのModelをテストしてみる Ra …

RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails

環境 ruby 1.9.3  & rails 3.2.8 適当なscaffoldを作っておく

  github.co …

Rails3.2+Mongoidでログイン機能~devise

  目次1 Gemfile2 generate3 model4 試す5 Login/Logout6 アクセス制限7 メニュー構成を整える8 翻訳 I18n9 見た目を整える Gemfile …

Rails3.2とBackbone.jsでサーバーサイドのページネーション

By: Haldane Martin – CC BY 2.0   前提 Rails3.2とBackbone.jsでサーバーサイドのフィルタリング Rails3.2とBackbon …