Backbone.js

Backbone.jsでモデルとフォームを関連づける〜backbone_datalink.js

投稿日:2013年2月13日 更新日:

 

 

こんなコードでフォームからjQueryでいちいち指定しているのを

 

こんな風に済ませたい

 

これを簡単に実現するのが、backbone-railsについてるbackbone_datalink.jsライブラリ(日本語コメントは私がいれました)

参考

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

みてわかるようにinput要素についてnameアトリビュートとmodelのアトリビュートを関連づけてお互いにイベントを設定してるシンプルなライブラリ

使い方は

  1. テンプレートでmodelのアトリビュート名に対応するinput要素のname要素に配置しておく
  2. initializeなどで@modelを準備する.例:   @model = new @collection.model()
  3. renderなどでjQueryプラグインであるbackbone_datalink()を実行する.例: @$("form").backboneLink(@model)

 

ただし、checkboxなどの要素に対応してない(たぶんradiobutton/textareaも対応してない)し、nestedなformに対応してない

改良版に挑戦されてる人がいました

backbone.js で railsのformをfillしたい。

こういうのをSerializeというらしい

ThoughtBot本に書いてあったSerializerがなかなか具合がいいかも

 

*Bakcbone_datalinkをjQueryのプラグインからCoffeeScriptでBackbone.Viewのメソッド形式に変えてみました

使い方はrenderとかで

例えば

 

サンプル

evening-mesa-7353.herokuapp.com/

どこかのViewにここと同じmodelを監視するイベントを作っておけば、フォームの入力によって、そこのデータを動的に書き換えることができます

今後はmodelを渡すViewにはbackboneLinkメソッドを書いてmodelとviewをなるべく連動させようと思います

 

github.com/marionettejs/backbone.syphon

-Backbone.js
-

執筆者:

関連記事

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

By: woodleywonderworks – CC BY 2.0   ThoughtBotの本を読み進めてるけど私には買ってよかったと感じている ゾンビviewのワナを回避す …

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

By: asobi tsuchiya   目次1 はじめに2 サンプルの準備3 初期化4 ルーター5 READ6 CREATE7 UPDATE8 DELETE はじめに backbone-r …

Backbone-formsをさわってみた

github.com/powmedia/backbone-forms backbone-formsの特徴 簡単なスキーマでフォームを生成 バリデーション ネストしたフォーム 使えるそしてカスタマイズ可 …

no image

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

  前回 Rails3.2でJasmineをつかってBackbone.jsのModelをテストしてみる   Developing Backbone.js Applications …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …