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でリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …

Todolistをmarionette化

By: Jackie – CC BY 2.0 目次1 Marionette.js2 インストール3 Application4 gulpfile.coffee5 ItemView6 Coll …

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

Backbone.js0.9.10以降のクライアントサイドでのvalidate

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …