Backbone Form -> Model sync View

formview.coffee

# FormView Class
# 
# Backbone View subclass that will allow you to bind input fields
# to model fields and keep the data in sync using the same 
# declarative syntax you're used to for Backbone Views.
#
# blog post: http://thurloat.com/2012/01/17/backbone-sync-models-and-views
#
# class TestView extends FormView
#
#   fieldMap:
#     "#phone_number": "phone_number"
#     "#first_name, #last_name": 
#       field: "fullName"
#       toModel: "fullNameToModel"
#       toForm: "fullNameToForm"
#   
#   fullNameToModel: ->
#     # return the value to set into the model
#     "#{@$('#first_name').val()} #{@$('#last_name')}"
#
#   fullNameToForm: ->
#     nameParts = do @model.get("fullName").split
#     @$('#first_name').val nameParts[0]
#     @#('#last_name').val nameParts[1]
#
class FormView extends Backbone.View
    
  syncModelToForm: (model, field) ->
    for selector, field of @fieldMap
      if field.toForm?
        do @[field.toForm]
      else
        @$(selector).val(@model.get field)

  syncFormToModel: (jqEvent) ->
    setOb = {}
    for selector, field of @fieldMap
      if field.toModel?
        fieldName = field.field
        setValue = @[field.toModel] jqEvent
      else
        fieldName = field
        setValue = do @$(selector).val
      setOb[fieldName] = setValue

    @model.set setOb, (error) -> console.log error
      
  delegateFormSync: (selector, field) ->
    $(@el).delegate selector, "change", (ev) =>
      @syncFormToModel ev, selector, field
      
  delegateEvents: (events) ->
    
    super

    if @model?
      @fieldMap = @fieldMap or {}
      for selector, field of @fieldMap
          
        # bind selector change to the model
        @model.bind "change:#{ field }", @syncModelToForm, @
        
        # bind form element change events to sync up to the model
        @delegateFormSync selector, field

👍