Ubiquitous JS example: UserEditView

user_edit_view.coffee

templates = require '../../shared/lib/templates'
User = require '../../shared/models/user'
withManagedForm = require '../lib/with_managed_form'

template = ->
  h2 @user.get("name")

  form '.edit-user', ->
    label "Name"
    input name: "name", type: "text"
    
    label "Email"
    input name: "email", type: "text"
      
    button type: "submit", "Submit"

module.exports = class UserEditView extends Backbone.View
  className: 'user-edit-view'

  events:
    'submit form.edit-user': 'submit'

  constructor: (user) ->
    @user = user or new User()
    super()

  render: ->
    @$el.html templates.render(template, { user: @user })
    @

  submit: (e) ->
    e.preventDefault()
    @user.save {}
      success: =>
        @$el.trigger('alert', ['Your changes have been saved.', 'success'])

# Mixin provides data binding
withManagedForm UserEditView::,
  modelProperty: 'user'
  formSelector: '.edit-user'