I’ve already done that. Everybody already done that. What nested forms are? It’s something which adds a new entry row, or removes one from a form, by clicking on + or - buttons (sometimes add or remove, YMMV). This all awesome, but with some tricks, it’s very easy to reproduce.

I’ll write every user-faced webpage in SproutCore sooner or later, it’s inevitable. However, old habits die hard, I still want to use Formtastic, and stuff Slim gives to me.

The first common denominator is the template usage. All righty then, let’s start somehow.

Interestingly, building your own handlebars.js is the hardest part (and if you’re already used to it, you can imagine the rest). First off, you need node.js and npm installed:

1
2

brew install node
curl http://npmjs.org/install.sh | sudo sh

I really hope you already use homebrew.

1
2
3
4
5
6
7

cd /tmp
curl https://nodeload.github.com/wycats/handlebars.js/tarball/master | tar zxvf -
cd wycats-handlebars*
# (at this point you might want to remove therubyracer gem from Gemfile)
bundle --path vendor --binstubs
npm install jison
bin/rake release

Now wipe the sweat off of our forehead, and grab the newly created handlebars.js and handlebars.vm.js files, and copy them to our project’s lib/assets/javascripts directory (some of you might want to put them to vendor/assets/javascripts rightfully, I’m just lazy).

I’m not about to go into the details how to implement nested forms. That part hasn’t changed after all. You can get a very good insight on what it is and how to implement it watching Ryan Bates’ always amazing RailsCasts episode #196, and the following RailsCasts episode #197.

OK, 3rd party stuff is in place, let’s wire it into our app:

1
2
3
4
5

// app/assets/javascript/application.js
//= require jquery
//= require jquery_ujs
//= require handlebars
//= require_tree .

Now handlebars.js is picked up. Let’s create a view:

1
2
3
4
5
6
7
8
9
10
11

/ views/pages/_form.html.slim
= semantic_form_for @quote do |f|
  script#add_form_fragment{type="text/x-handlebars-template"}
    = f.semantic_fields_for(:fragments, f, :child_index => "{{new_id}}") do |builder|
      = render("fragment", :p => builder)
  = f.inputs
  = f.inputs :fragments do
    = f.semantic_fields_for :fragments do |p|
      = render 'fragment', :p => p
    = link_to t('.add_form_fragment_link'), "#", id: "add_form_fragment_link"
  = f.buttons

UPDATE: It looks like I forgot to show you my fragment. Here you are:

1
2
3
4
5

/ views/pages/_fragment.html.slim
= p.inputs :name => 'fragment' do
  = p.input :param1
  = p.input :param2
  = p.input :_destroy, :as => :boolean, :input_html => { :class => 'destroy_fieldset' }

As you can see, we put a rendered fields_for + render 'fragment' into a script field, but with a child index which can be replaced by handlebars. Remove links are not handled here, that part hasn’t changed. I suppose we might want to place more fragments into a page, and in that case we can hook to more DOM events:

1
2
3
4
5
6
7
8
9
10
11
12

# app/assets/javascript/form_fragments.js.coffee
template = []

add_fields = (e, link, association)->
  new_id = new Date().getTime()
  source = $("#" + association).html()
  template[association] ||= Handlebars.compile(source)
  $(link).before(template[association]({new_id: new_id}))
  e.preventDefault()
$ ->
  $("#add_form_fragment_link").click (e)->
    add_fields(e, this, "add_form_fragment")

In this point if you look at the source it generates, you’ll see {{new_id}} gets replaced with __new_id__ at a couple of places. It’s because Formtastic naming settings replace everything which is not a letter, number, and some punctuation marks like dash, colon, or period. Let’s fix it:

1
2
3
4
5
6

# config/initializers/formtastic.rb
module Formtastic::Inputs::Base::Naming
  def sanitized_object_name
    object_name.to_s.gsub(/\]\[|[^-a-zA-Z0-9:.{}]/, "_").sub(/_$/, "")
  end
end

You can also fix in ActionView:

1
2
3
4
5
6
7

# config/initializers/actionview.rb
class ActionView::Helpers::InstanceTag
  private
  def sanitized_object_name
    @sanitized_object_name ||= @object_name.gsub(/\]\[|[^-a-zA-Z0-9:.{}]/, "_").sub(/_$/, "")
  end
end

You can always smooth off wrinkles, like hiding the add link if you don’t catch it:

1
2

/* app/assets/stylesheets/form_fragment.css */
no-js #add_form_fragment_link { display: none; }

You use Modernizr, don’t you?

That’s it, enjoy your new templates put into a <script> tag, instead of a long onclick event with full of escaping.