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 …

Backbone.jsでView自身にdata要素をもたせる

By: See-ming Lee – CC BY 2.0 目次1 外から追加2 最初からView内で設定 外から追加 $.dataはうまくいかないので、attrでやった [crayon-5 …

Backbone.Marionette+NedbでElectron♪

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

ecoテンプレートでヘルパーを使う

By: Stephanie Dillingham – CC BY 2.0   参照 backbonecoffeescript.com/eco-helpers-tutorial e …

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

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