Simple FormHelper that works well with Backbone.js Models

formhelper.coffee

###
Helps creating and submitting forms
- easy labeling
- automatically inserts values of the model to the form
- is able to serialize forms to JSON
- can submit the form to the server
- automatically displays errors if there are any
###
class FormHelper
  
  # Constructor takes the model as argument
  constructor : (@model, _options) ->
    @errors = []
    @counter = 0
    @options = 
      type : "GET"
      url : ""
      dataType : "json"
      before_submit : ->

    _.extend(@options, _options)
  
  label_for : (label) ->
    "<label for='#{@counter}'>#{label}</label>"

  # inserts a textfield
  text : (field, _default) ->
    value = _default || @model.get(field) || ""
    ret = "<input type='text' id='#{@counter++}' name='#{field}' value='#{value}' />"
    ret += @errors_for_field(field)
    
  textarea : (field, _default) ->
    value = _default || @model.get(field) || ""
    ret = "<textarea id='#{@counter++}' name='#{field}'>#{value}</textarea>"
    ret += @errors_for_field(field)
    
  hidden : (field, _default) ->
    value = _default || @model.get(field) || ""
    ret = "<input type=\"hidden\" id=\"#{@counter++}\" name=\"#{field}\" />"
    ret += @errors_for_field(field)
    
  # inserts a password field
  password : (field) ->
    ret = "<input type='password' name='#{field}' id='#{@counter++}' />"
    ret += @errors_for_field(field)
  
  # inserts a checkbox field
  checkbox : (field) ->
    counter = @counter++
    
    checked = if @model.get(field) then "checked=\"checked\"" else ""
    ret = "<input type=\"checkbox\" name=\"#{field}\" id=\"#{counter}\" #{checked} />"
    ret += @errors_for_field(field)  

  errors_for_field : (field) ->
    if @errors[field]?
      "<span class='form_error'>#{@errors[field]}</span>"
    else
      ""

  # returns a serialized json representation of the form
  serialize : (form) ->
    inputs = form.find('input[name]')
    console.log "#{inputs.length}"
    formdata = {}
    _.each inputs, (el) ->
      el = $(el)
      if el.attr('type') != "checkbox"
        formdata[el.attr('name')] = el.val()
      else
        formdata[el.attr('name')] = el.attr('checked') == true
    textareas = form.find('textarea[name]')
    _.each textareas, (el) ->
      el = $(el)
      formdata[el.attr('name')] = el.val()
    @serialized = {}
    @serialized[@model.top_level_element] = formdata
    @serialized
  
  # updates the values of the model
  update_model : ->
    @model.set(@serialized[@model.top_level_element])
  
  # submits the form with the given options
  submit : (form, success, error) ->
    @options.data = @serialize(form)
    console.log "data", @options.data
    @options.before_submit(@options.data)
    ajax_options = @options
    that = this
    ajax_options.success = (resp) ->
      if resp.errors
        that.errors = resp.errors
        that.options.view.render() if that.options.view
        error(resp) if error?
      else
        that.update_model()
        success(resp) if success?

    $.ajax ajax_options