mbajoras

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>

mbajoras

<script id="login-template" type="text/template">
   <div class="msg-success hide">You are now logged in.</div>
   <div class="error-bad-auth hide">Username and/or password incorrect.</div>
   <div class="error-unknown hide"><%- stateDetails %></div>

   <form action="#" method="post">
      <h1>Login</h1>
      <input name="username" type="text" value="<%- username %>">
      <input name="password" type="password" value="<%- password %>">

mbajoras

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:

mbajoras

class @ALoginModel extends Backbone.Model
   defaults: ->
      username:     ''
      password:     ''
      state:        @notAuthState # This is where you set the initial state.
      stateDetails: ''

   # Define constants to represent the various states and give them descriptive
   # values to help with debugging.
   notAuthState:     'Not Authenticated'

mbajoras

# Initializes Marionette.js global application object.
@gApp = new Backbone.Marionette.Application()

# Prepares the DOM by assigning regions to various elements.
@gApp.addInitializer (options) ->
   @addRegions(content: 'body')

# Login page controller.
@gApp.module 'LoginPage', (module, app, backbone, marionette, $, _) ->
   module.addInitializer (options) ->