Cocoon + Chosen の使い方

今後も使いそうな組み合わせなので、備忘録です。

Cocoon は親テーブルのフォームで子テーブルのデータをまとめて更新するフォームを作りたいときに、よきにはからってくれる Gemです。
Chosen は、選択リストで検索を使えるようになる jQueryのプラグインです。

app/views/parents/_form.html.haml

-# simple_form 内を抜粋
=link_to_add_association '追加する', f, :child, data: {"association-insertion-node" => "div#children", "association-insertion-method" => "append"}
%div
  %div#children
    = f.simple_fields_for :children do |child|
      = render partial: 'child_fields', locals: { f: child }

app/views/parents/_child_fields.html.haml

%div
  = f.input :item_id, collection: Item.all, as: :select, label: false, input_html: { class: 'chosen-select' }

app/assets/javascripts/children_select.js

$(function() {
  $(".chosen-select").chosen();
  $('div#children').on('cocoon:after-insert', function(e, insertedItem) {
    $(".chosen-select").chosen()
  });
});

$(".chosen-select").chosen(); だけだと、「追加する」ボタンで子フィールドセットを追加した際に chosen() が呼ばれていない素の選択リストになってしまいます。
そこで、Cocoon が提供する callback を使って、追加時にも chosen() を呼ぶようにします。