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
-

執筆者:

関連記事

Electron+Backbone.jsでボードゲーム〜3目並べ

By: sopasnor – CC BY 2.0 目次1 ボイラープレート2 構想3 盤面の描画4 Marionette.ObjectとBackbone.Radio5 AI6 Done!7 …

RailsでこんにちはBackbone.Marionette

By: palindrome6996 – CC BY 2.0 自分の中でmarionette熱がだんだんと高まりつつあり、特徴的なItemView、CollectionView、Compo …

backbone-relationalをJasmineでテストしてみた

Backbone.Marionette+NedbでElectron♪

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

Underscore.jsのリファレンスなどのリンクメモ

By: Anne-Lise Heinrichs – CC BY 2.0 Underscore.jsは便利な関数ライブラリ. Backbone.jsが依存している.一部でアンスコと呼ばれてい …