経緯

親モデルと同時に子モデルを保存するときに超便利なnested_formというgemがあります。

https://github.com/ryanb/nested_form

たまたま、以下のような仕様を実装する機会がありました。

  • 自由に子の数は変えられる
  • 最大でも5個に抑える
  • 何番目のフィールドかを表示する

その方法をば。

nested_formの使い方

[Rails] nested_attributesの使い方

こちらをご参照ください。

上限の決め方

実はやり方が公式に載っています。

How To: Limit max count of nested fields

ここにあるとおり、

をAssetとして読み込んでやるだけです。

個人的に、coffeeで全部書いてるのに一つだけjsってのも気持ちが悪いので、書き直したのがこちらです。

あとはViewファイルの追加ボタンに以下のようにdata-link属性にリミットの個数を入れてやるだけです。

フィールドの順番を表示する

フィールドの順番を表示するだけであれば、特に表示Ruby側で使えるようにする必要がないので、上記のCoffeeScriptに追記しました。

解説

nested_formではフォームが追加されたときはnested:fieldAdded、削除されたときはnested:fieldRemovedというイベントが発火します。

$linkはこのイベントを発火させたボタンのDOMが入っていて、一定数を超えているとき、非表示にして、同時に番号を表示させています。

ただ、ここで、一点注意なのは、クライアント側でDOMを操作してやるようなことをされてしまっては、必ずしも上限の個数のみのデータが飛んで来るわけではありません。

ちゃんと、モデル側でもバリデーションをかけてやりましょう。

以下は個数が大きすぎたときに弾くバリデーションの一例です。

仮にDOMを操作されても「メンバー多すぎ!エグザイルか!」と表示されます。1

まとめ

  • 公式をよく見れば意外とちゃんと載ってる
  • JSのバリデーションに頼りきらず、ちゃんとModelでもバリデーションを書く

以上で個数の上限を決めると同時にフィールドの番号を表示できるようになります。

公式のWikiはひとまず、チェックしてみる癖を付けてもいいかもしれませんね。


  1. 「Choo Choo TRAIN」を歌いながら女の子に「チューしてよ!」って叫んでた友達を思い出しました。