Simple Backbone.Marionette tutorial

The result of blog posts http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/ http://davidsulc.com/blog/2012/04/22/a-simple-backbone-marionette-tutorial-part-2/

by bartek

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.1.0-bundled/backbone.marionette.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="login" class="btn btn-lg btn-primary">Login</div>

<div id="AppBase"></div>

<!-- TEMPLATES -->

<!-- login template -->
<script type="text/template" id="login-view">
    <h2>Login</h2>
    <div class="form-group">
      <input class="form-control" name="email" type="text" />
    </div>
    <div class="form-group">
    <input class="form-control" name="password" type="password" />
    </div>
</script>

<!-- register template -->
<script type="text/template" id="register-view">
    <h2>Register</h2>
    <div class="form-group">
      <input class="form-control" name="email" type="text" />
    </div>
    <div class="form-group">
    <input class="form-control" name="password" type="password" />
    </div>
</script>

<!-- tabs layout -->
<script type="text/template" id="tabsTemplateForSignin">
  <ul class="nav nav-tabs">
    <li class="active">
      <a data-content="signin" data-toggle="tab" href="#signin">Sign in</a>
    </li>
    <li>
      <a data-content="signup" data-toggle="tab" href="#signup"> Sign up</a>
    </li>
  </ul>
  <div id="tab-content" class="tab-content"></div>
</script>

<!-- tabs layout for signUp -->
<script type="text/template" id="tabsTemplateForSignup">
  <ul class="nav nav-tabs">
    <li>
      <a data-content="signin" data-toggle="tab" href="#signin">Sign in</a>
    </li>
    <li class="active">
      <a data-content="signup" data-toggle="tab" href="#signup"> Sign up</a>
    </li>
  </ul>
  <div id="tab-content" class="tab-content"></div>
</script>

CSS

body {
    background: #ffffff;
}
#AppBase {
    width: 100%;
    max-width: 960px;
    height: 480px;
    margin: 10px auto;
    padding: 0;
    float: left;
    outline: 1px solid #808080;
}
#AppContainer {
    margin: 0;
    padding: 0;
}
h1 {
    float:left;
    width:100%;
    margin:0;
    padding:0;
    text-align: center;
    height:100%;
}
.subLayout {
    float:left;
    width: 50%;
    height:200px;
    outline:1px solid #808080;
}
h2 {
    width:100%;
    text-align:center;
}
button {
    width: 75px;
    line-height:30px;
    text-align: center;
}

CoffeeScript

app = new Backbone.Marionette.Application()
app.addRegions 
  appRegion: "#AppBase"
  login: "#login"

      
app.module "App", (authApp, App, Backbone, Marionette, $, _) ->
  authApp.Router = Marionette.AppRouter.extend(
    API =
      signin: ->
        new authApp.signInController
          region: app.appRegion

      signup: ->
        new authApp.signUpController
          region: app.appRegion                                        
  )
  authApp.on "auth:tab:switchviews", (name) ->
    if name is "signin"
      API.signin()
    else
      API.signup()
        
  app.on "auth:signin", ->
    API.signin()
  
  authApp.signInController = Marionette.Controller.extend(
    initialize: (options) ->
      layout = new authApp.authLayoutForSignIn()
      signinView = new authApp.signinView()
      layout.tabContent.show signinView
      app.appRegion.show layout
  )
    
  authApp.signinView = Marionette.ItemView.extend(
    template: "#login-view"
  )

  authApp.authLayoutForSignIn = Marionette.Layout.extend(
    template: "#tabsTemplateForSignin"
    regions:
      tabContent: "#tab-content"
    events:
      "click ul.nav-tabs li a": "switchViews"
        
    switchViews: (e) ->
      e.preventDefault()
      @curTab = $(e.target).data("content")
      authApp.trigger "auth:tab:switchviews", @curTab
  )

  authApp.signUpController = Marionette.Controller.extend(
    initialize: (options) ->
      layout = new authApp.authLayoutForSignUp()
      signUpView = new authApp.signUpView()
      layout.tabContent.show signUpView
      app.appRegion layout
  )

  authApp.signUpView = Marionette.ItemView.extend(
    template: "#register-view"
  )
  
  authApp.authLayoutForSignUp = Marionette.Layout.extend(
    template: "#tabsTemplateForSignup"
    regions:
      tabContent: "#tab-content"
    events:
      "click ul.nav-tabs li a": "switchViews"
        
    switchViews: (e) ->
      e.preventDefault()
      @curTab = $(e.target).data("content")
      authApp.trigger...