Skip to content

Instantly share code, notes, and snippets.

@speg

speg/a.coffee

Created June 13, 2012 01:12
Show Gist options
  • Save speg/2921176 to your computer and use it in GitHub Desktop.
Save speg/2921176 to your computer and use it in GitHub Desktop.
Download ZIP
Laying Down the Index
Raw
a.coffee
Batman.config.minificationErrors = false
class Super extends Batman.App
@root 'hero#index'
class Super.HeroController extends Batman.Controller
index: ->
console.log 'Superheroes ready!'
window.Super = Super
Super.run()
Raw
a.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Batman!</title>
<link rel="stylesheet" href="../resources/base.css"
<script src="../../lib/es5-shim.js"></script>
<script src="../../lib/batman.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div data-yield="main">
</div>
<div data-defineview="hero/index">
</div>
</body>
</html>
Raw
app.coffee
Batman.config.minificationErrors = false
class Super extends Batman.App
@root 'hero#index'
@route "/stats", "hero#stats"
class Super.HeroController extends Batman.Controller
index: ->
@set 'currentHeroes', Super.Hero.get('all')
console.log 'Superheroes ready!'
stats: ->
@set 'currentHeroes', Super.Hero.get('all')
createHero: ->
newHero = new Super.Hero(name: '', power: Math.floor(Math.random() * 100))
newHero.save()
console.log 'Created', newHero
saveHero: (node, event, context) ->
hero = context.get('hero')
hero.save()
deleteHero: (node, event, context) ->
hero = context.get('hero')
hero.destroy()
class Super.Hero extends Batman.Model
@persist Batman.LocalStorage
@encode 'name', 'power'
@storageKey: 'super-hero'
@classAccessor 'statistics', ->
heroes = @get 'all'
totalPower = 0
heroes.forEach (h) ->
totalPower += h.get 'power'
return [heroes.length, totalPower/heroes.length]
window.Super = Super
Super.run()
Raw
b.coffee
class Super.Hero extends Batman.Model
@persist Batman.LocalStorage
@encode 'name', 'power'
@storageKey: 'super-hero'
Raw
b.html
<div data-defineview="hero/index">
<ul>
<li data-foreach-hero="currentHeroes">
<input type="text" data-bind="hero.name" /><span data-bind="hero.power"></span>
</li>
</ul>
<button data-event-click="createHero">New Hero</button>
</div>
Raw
c.coffee
class Super.HeroController extends Batman.Controller
index: ->
console.log 'Superheroes ready!'
createHero: ->
newHero = new Super.Hero(name: '', power: Math.floor(Math.random() * 100))
newHero.save()
console.log 'Created', newHero
Raw
d.coffee
class Super.HeroController extends Batman.Controller
index: ->
@set 'currentHeroes', Super.Hero.get('all')
console.log 'Superheroes ready!'
createHero: ->
newHero = new Super.Hero(name: '', power: Math.floor(Math.random() * 100))
newHero.save()
console.log 'Created', newHero
Raw
e.coffee
class Super.HeroController extends Batman.Controller
index: ->
@set 'currentHeroes', Super.Hero.get('all')
console.log 'Superheroes ready!'
createHero: ->
newHero = new Super.Hero(name: '', power: Math.floor(Math.random() * 100))
newHero.save()
console.log 'Created', newHero
saveHero: (node, event, context) ->
hero = context.get('hero')
hero.save()
Raw
f.coffee
class Super.Hero extends Batman.Model
@persist Batman.LocalStorage
@encode 'name', 'power'
@storageKey: 'super-hero'
@classAccessor 'statistics', ->
heroes = @get 'all'
totalPower = 0
heroes.forEach (h) ->
totalPower += h.get 'power'
return [heroes.length, totalPower/heroes.length]
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Batman!</title>
<link rel="stylesheet" href="../resources/base.css"
<script src="../../lib/es5-shim.js"></script>
<script src="../../lib/batman.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div data-yield="main">
</div>
<div data-defineview="hero/index">
<ul>
<li data-foreach-hero="currentHeroes">
<input type="text" data-bind="hero.name" data-event-change="saveHero"/><span data-bind="hero.power"></span><a data-event-click="deleteHero">X</a>
</li>
</ul>
<button data-event-click="createHero">New Hero</button>
<a data-route="'/stats'">Stats</a>
</div>
<div data-defineview="hero/stats">
Number of heroes: <strong data-bind="Hero.statistics[0]"></strong><br />
Average Power: <strong data-bind="Hero.statistics[1]"></strong>
<a data-route="'/'">back</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment