mbajoras · June 8, 2013 02:45
diff --git a/loginView.coffee b/loginView.coffee
 class @ALoginView extends Backbone.Marionette.ItemView
   # Specifies the Underscore.js template to use.
   template:  '#login-template'

   # Properties of the DOM element that will be created/inserted by this view.
   tagName:   'div'
   className: 'login-area'

   # Shortcut references to components within the UI.
   ui:
      loginForm:           'form'
      usernameField:       'input[name=username]'
      passwordField:       'input[name=password]'
      successMessage:      '.msg-success'
      authErrorMessage:    '.error-bad-auth'
      generalErrorMessage: '.error-unknown'

   # Allows us to capture when the user submits the form either via selecting
   # the login button or typing enter in one of the input fields.
   events:
      'submit form': 'formSubmitted'

   # Specify the model properties that we should rerender the view on.
   modelEvents:
      'change:state':        'render'
      'change:stateDetails': 'render'

   formSubmitted: (event) ->
      # Stop the form from actually submitting to the server.
      event.stopPropagation();
      event.preventDefault();

      @model.set
       'username': @ui.usernameField.val()
       'password': @ui.passwordField.val()

      # Fire off the global event for the controller so that it handles the
      # server communication.
      window.gApp.vent.trigger('login:submit', @model)

   onRender: ->
      # This is where most of the state-dependent logic goes that used to be
      # written as random jQuery calls. Now, since the view is rerendered on
      # each state change, you just have to modify the DOM relative to the
      # initial content specified in the Underscore template.

      switch @model.get('state')
         when @model.notAuthState
            # Focus the username field for the user's convenience.
            @ui.usernameField.focus()

         when @model.pendingAuthState
            # Disable all the form controls and change the button text to show
            # the user that a request is pending.
            @ui.loginForm.find('input, select, textarea').prop('disabled', true)
            @ui.loginForm.find('input[type=submit]').val('Logging In…')

         when @model.authFailState
            # When the user submits invalid credentials, show them an
            # appropriate error message and focus the password field for their
            # convenience.
            @ui.authErrorMessage.show()
            @ui.passwordField.focus()

         when @model.authUnknownState
            @ui.generalErrorMessage.show()

         when @model.authSuccessState
            @ui.successMessage.show()
            @ui.loginForm.hide()

            # Insert more success logic here.
            # For example, you could reload the page, redirect the user to a
            # different page, or you could fire off a global event that causes
            # the page view to switch to a different one.

   onShow: ->
      # The browser can't focus on a field that's not displayed on the screen
      # yet. This happens when the view is first shown on the screen.
      if @model.notAuthState == @model.get('state')
         @ui.usernameField.focus()
	class @ALoginView extends Backbone.Marionette.ItemView
	# Specifies the Underscore.js template to use.
	template: '#login-template'

	# Properties of the DOM element that will be created/inserted by this view.
	tagName: 'div'
	className: 'login-area'

	# Shortcut references to components within the UI.
	ui:
	loginForm: 'form'
	usernameField: 'input[name=username]'
	passwordField: 'input[name=password]'
	successMessage: '.msg-success'
	authErrorMessage: '.error-bad-auth'
	generalErrorMessage: '.error-unknown'

	# Allows us to capture when the user submits the form either via selecting
	# the login button or typing enter in one of the input fields.
	events:
	'submit form': 'formSubmitted'

	# Specify the model properties that we should rerender the view on.
	modelEvents:
	'change:state': 'render'
	'change:stateDetails': 'render'

	formSubmitted: (event) ->
	# Stop the form from actually submitting to the server.
	event.stopPropagation();
	event.preventDefault();

	@model.set
	'username': @ui.usernameField.val()
	'password': @ui.passwordField.val()

	# Fire off the global event for the controller so that it handles the
	# server communication.
	window.gApp.vent.trigger('login:submit', @model)

	onRender: ->
	# This is where most of the state-dependent logic goes that used to be
	# written as random jQuery calls. Now, since the view is rerendered on
	# each state change, you just have to modify the DOM relative to the
	# initial content specified in the Underscore template.

	switch @model.get('state')
	when @model.notAuthState
	# Focus the username field for the user's convenience.
	@ui.usernameField.focus()

	when @model.pendingAuthState
	# Disable all the form controls and change the button text to show
	# the user that a request is pending.
	@ui.loginForm.find('input, select, textarea').prop('disabled', true)
	@ui.loginForm.find('input[type=submit]').val('Logging In…')

	when @model.authFailState
	# When the user submits invalid credentials, show them an
	# appropriate error message and focus the password field for their
	# convenience.
	@ui.authErrorMessage.show()
	@ui.passwordField.focus()

	when @model.authUnknownState
	@ui.generalErrorMessage.show()

	when @model.authSuccessState
	@ui.successMessage.show()
	@ui.loginForm.hide()

	# Insert more success logic here.
	# For example, you could reload the page, redirect the user to a
	# different page, or you could fire off a global event that causes
	# the page view to switch to a different one.

	onShow: ->
	# The browser can't focus on a field that's not displayed on the screen
	# yet. This happens when the view is first shown on the screen.
	if @model.notAuthState == @model.get('state')
	@ui.usernameField.focus()
No results found