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

執筆者:

関連記事

no image

Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails

  公式 backbonejs.org/ Backbone ドキュメント日本語訳 github.com/enja-oss/Backbone イントロダクション github.com/enja

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

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

no image

RubyでDocxを分解してみた~Nokogiri::XML::SAX

    参照 Rubyでdocxをいろいろ分析してみた 今度はsaxのアプローチでdocxのword/document.xmlを分解してみた 使い方は、Nokogiri::XML: …

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD~fullcalendar-rails

目次1 前回2 READ ~データベースからイベントを読み込んでカレンダーに表示する3 CREATE~カレンダーからイベントを登録する4 UPDATE1~カレンダーのイベントをクリックしてイベントを編 …