jiewmeng · June 24, 2012 14:12
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE HTML>
 <html lang="en-US">
 <head>
 <meta charset="UTF-8">
 <title>Backbone Auth Test</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
 <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>    
 <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>    
 <script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.1/coffee-script.min.js"></script>    
 <script type="text/coffeescript">
 # Storage helper meant to fake a non-persistant local storage
 class FakeStorage 
    
    constructor: ->
        @storage = {}

    getItem: (key) ->
        return @storage["key"]

    setItem: (key, value) ->
        @storage[key] = value

    clear: ->
        @storage = {}

 # Encapsulates API for local storage
 # Uses local storage for supporting browsers
 # falls back to fake non-persistant storage otherwise
 class LocalStorageHelper 
    
    constructor: ->
        if window.localStorage 
            @storage = window.localStorage
        else 
            @storage = new FakeStorage()

    get: (key) ->
        return @storage.getItem(key)

    set: (key, value) ->
        @storage.setItem(key, value)

    clear: ->
        @storage.clear()

 # User model 
 class User extends Backbone.Model

 # Simulate a session in a traditional app
 # Uses LocalStorageHelper for persistance
 class Session extends Backbone.Model
    
    constructor: ->
        @storage = new LocalStorageHelper()
        @user = @storage.get("user") ? undefined

    login: (@user) ->
        @storage.set("user", @user)
        console.log "Logged in as: ", @user.get("username")

    logout: ->
        @user = undefined
        @storage.clear()
        console.log "Logged out"

    isLoggedIn: ->
        return @user ? false

 class FlashMessenger extends Backbone.Model 

    constructor: ->
        @messages = []

    add: (type, message) ->
        @messages.push 
            type: type
            message: message

    getMessages: ->
        ret = @messages.slice(0)
        @messages = []
        return ret

 # Singleton for Application
 # Use App to get an instance instead
 class _App
    
    constructor: ->
        @session = new Session()
        @flashMessenger = new FlashMessenger()

 # Use App.get() to get an instance of App
 class App 
    _instance = undefined
    @get: ->
        return _instance ?= new _App()

 class AppRouter extends Backbone.Router 
    
    routes: 
        "auth/login": "login"
        "auth/logout": "logout"
        "": "dashboard"

    login: -> 
        view = new LoginView()
        $("#viewHelperContainer").html view.el

    logout: ->
        App.get().session.clear()
        App.get().flashMessenger.add("success", "Successfully logged out")
        @navigate "auth/login"

    dashboard: ->
        view = new DashboardView()
        $("#viewHelperContainer").html view.el

 class LoginView extends Backbone.View 

    events:
        "submit #frmLogin": "login"
    
    initialize: ->
        @template = _.template $("#tmplLoginView").html()
        _.bindAll @, "login"

    render: ->
        @$el.html @template()

    login: ->
        user = new User
            username: @$("#username").val()
        App.get().session.login(user)
        return false

 class DashboardView extends Backbone.View
    
    initialize: ->
        @template = _.template $("#tmplDashboard").html()

    render: ->
        @$el.html @template
            user: App.get().session.user

 jQuery ->
    
    app = App.get()
    if app.session.isLoggedIn() 
        view = new DashboardView()
    else
        view = new LoginView()
    view.render()
    $("#viewHelperContainer").html view.el

 </script>
 </head>
 <body>

    <div id="viewHelperContainer"></div>

    <script type="text/template" id="tmplDashboard">
        <h1>Dashboard</h1>
        <a href="/auth/logout" id="btnLogout">Logout</a>
    </script>

    <script id="tmplLoginView" type="text/template">
        <form action="a" method="post" id="frmLogin">
            <h1>Login</h1>
            <div class="fieldcontain">
                <label for="username">Username</label>
                <input type="text" name="username" id="username" placeholder="Username" />
            </div>
            <div class="fieldcontain">
                <label for="password">Password</label>
                <input type="password" name="password" id="password" placeholder="Password" />
            </div>
            <input type="submit" value="Login">
        </form>
    </script>

 </body>
 </html>
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title>Backbone Auth Test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.1/coffee-script.min.js"></script>
	<script type="text/coffeescript">
	# Storage helper meant to fake a non-persistant local storage
	class FakeStorage

	constructor: ->
	@storage = {}

	getItem: (key) ->
	return @storage["key"]

	setItem: (key, value) ->
	@storage[key] = value

	clear: ->
	@storage = {}

	# Encapsulates API for local storage
	# Uses local storage for supporting browsers
	# falls back to fake non-persistant storage otherwise
	class LocalStorageHelper

	constructor: ->
	if window.localStorage
	@storage = window.localStorage
	else
	@storage = new FakeStorage()

	get: (key) ->
	return @storage.getItem(key)

	set: (key, value) ->
	@storage.setItem(key, value)

	clear: ->
	@storage.clear()

	# User model
	class User extends Backbone.Model

	# Simulate a session in a traditional app
	# Uses LocalStorageHelper for persistance
	class Session extends Backbone.Model

	constructor: ->
	@storage = new LocalStorageHelper()
	@user = @storage.get("user") ? undefined

	login: (@user) ->
	@storage.set("user", @user)
	console.log "Logged in as: ", @user.get("username")

	logout: ->
	@user = undefined
	@storage.clear()
	console.log "Logged out"

	isLoggedIn: ->
	return @user ? false

	class FlashMessenger extends Backbone.Model

	constructor: ->
	@messages = []

	add: (type, message) ->
	@messages.push
	type: type
	message: message

	getMessages: ->
	ret = @messages.slice(0)
	@messages = []
	return ret

	# Singleton for Application
	# Use App to get an instance instead
	class _App

	constructor: ->
	@session = new Session()
	@flashMessenger = new FlashMessenger()

	# Use App.get() to get an instance of App
	class App
	_instance = undefined
	@get: ->
	return _instance ?= new _App()

	class AppRouter extends Backbone.Router

	routes:
	"auth/login": "login"
	"auth/logout": "logout"
	"": "dashboard"

	login: ->
	view = new LoginView()
	$("#viewHelperContainer").html view.el

	logout: ->
	App.get().session.clear()
	App.get().flashMessenger.add("success", "Successfully logged out")
	@navigate "auth/login"

	dashboard: ->
	view = new DashboardView()
	$("#viewHelperContainer").html view.el

	class LoginView extends Backbone.View

	events:
	"submit #frmLogin": "login"

	initialize: ->
	@template = _.template $("#tmplLoginView").html()
	_.bindAll @, "login"

	render: ->
	@$el.html @template()

	login: ->
	user = new User
	username: @$("#username").val()
	App.get().session.login(user)
	return false

	class DashboardView extends Backbone.View

	initialize: ->
	@template = _.template $("#tmplDashboard").html()

	render: ->
	@$el.html @template
	user: App.get().session.user

	jQuery ->

	app = App.get()
	if app.session.isLoggedIn()
	view = new DashboardView()
	else
	view = new LoginView()
	view.render()
	$("#viewHelperContainer").html view.el

	</script>
	</head>
	<body>

	<div id="viewHelperContainer"></div>

	<script type="text/template" id="tmplDashboard">
	<h1>Dashboard</h1>
	<a href="/auth/logout" id="btnLogout">Logout</a>
	</script>

	<script id="tmplLoginView" type="text/template">
	<form action="a" method="post" id="frmLogin">
	<h1>Login</h1>
	<div class="fieldcontain">
	<label for="username">Username</label>
	<input type="text" name="username" id="username" placeholder="Username" />
	</div>
	<div class="fieldcontain">
	<label for="password">Password</label>
	<input type="password" name="password" id="password" placeholder="Password" />
	</div>
	<input type="submit" value="Login">
	</form>
	</script>

	</body>
	</html>