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でユーザー管理機能を追加~Devise

  前回 Rails3.2のアプリにユーザー機能を追加する~Devise サインアップ機能を削除したので、Railsからのユーザー管理機能を追加した 目次1 generate2 routes …

Rails3.2でJasmineをつかってCoffeeScriptをテスト~jasminerice

    #261 Testing JavaScript with Jasmine (revised)   addyosmani.github.com/backbone-f

Refinery CMS3.0にBootstrap3.1を適用する

目次1 Gemfile2 Sprocketを設定3 application.htmlをoverrideする4 Grid Layout5 Navbar6 Panel7 Well8 できた Gemfile …

WindowsのRubyでxlsxファイルにアクセスする~roo

By: Hajime NAKANO – CC BY 2.0 目次1 rooのインストール2 rooを使ってみる(基本)3 シートを指定する4 セルの値を確認する5 行列を数える rooのイ …

気になるBackbone.jsのプラグインとTips

  By: Francisco Gonzalez 随時更新中 目次1 気になるBackbone.jsのプラグイン2 チュートリアル3 Tips4 気になるjQueryのプラグイン 気になるB …