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
-

執筆者:

関連記事

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

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

Backbone.Marionette+NedbでElectron♪

By: Jairo – CC BY 2.0 目次1 はじめに2 環境3 yarnのインストール4 electronのインストール5 開発環境の概要6 webpackでライブラリの同梱7 g …

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

目次1  前回2 UPDATE1~バグの訂正3 UPDATE2 ~ ドラッグとリサイズでデータ更新4 DELETE~イベントの削除5 バグがあった → 解決しました!6  herokuにサンプルアップ …

Rails3.2とBackbone.jsでサーバーサイドのフィルタリング

By: Haldane Martin – CC BY 2.0   テーブルに表示されているデータをサーチバーに入力した語で絞り込みたい こういうテーブルフィルタリングを実現する仕 …

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

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