RailsっぽくHTMLのフォームをJSのオブジェクトに変換するjQueryプラグイン

RailsっぽくHTMLのフォームをJSのオブジェクトに変換するjQueryプラグインを作りました。たぶん車輪の再発明だけど、僕のググり力では見つけられなかったので。

• yuku-t/jquery-formdata

たとえばこんなHTMLがあるとします。

<form id="item_form">
  <input name="token" value="TOKEN"/>
  <input name="item[title]" value="Title"/>
  <input name="item[tag_data][names][]" value="Ruby"/>
  <input name="item[tag_data][versions][]" value="2.0.0"/>
  <input name="item[tag_data][names][]" value="Vim"/>
  <input name="item[tag_data][versions][]" value=""/>
</form>

これをサブミットするとサーバ側のRailsではハッシュぽくアクセスすることができます。

params[:token]
#=> 'TOKEN'
params[:item][:title]
#=> 'Title'
params[:item][:tag_data]
#=> { names: ['Ruby', 'Vim'], versions: ['2.0.0', ''] }

jQuery.formData はこれと同じようなオブジェクトを作るjQueryプラグインです。

var params = $('#item_form').formData();
params['token']
//=> 'TOKEN'
params['item']['title']
//=> 'Title'
params['item']['tag_data']
//=> { names: ['Ruby', 'Vim'], versions: ['2.0.0', ''] }

例えばBackboneのモデルと組み合わせると、ユーザの入力内容から簡単にインスタンスを生成できて便利です。

var FormView = Backbone.View.extend({
  el: '#item_form',
  events: {
    submit: 'onSubmit'
  },
  onSubmit: function (e) {
    e.preventDefault();
    var model = new MyModel(this.$el.formData().item);
    model.get('title');  //=> 'Title'
  }
});