batman.js template

by tacomanator

HTML

<script src="https://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js"></script>
<script src="http://github.com/Shopify/batman/raw/master/lib/es5-shim.js"></script>
<script src="http://github.com/Shopify/batman/raw/master/lib/batman.js"></script>
<script src="http://github.com/Shopify/batman/raw/master/lib/batman.jquery.js"></script>
<link rel="stylesheet" href="http://batmanjs.org/examples/resources/reset.css">
<div id="container"> 
    <h1>Listing</h1>
<ul>
  <li data-foreach-contact="Person.all">
    <input type="text" data-bind="person.fname" data-event-blur="person.save"
                placeholder="Name" />
      </li>
</ul>

    <h1 data-mixin="animation" data-hideif="person.hasName">Please enter your name</h1> 

    <form class="span-12"> 
        <fieldset> 
          <p> 
              <label>First Name</label><br /> 
              <input class="title" type="text" data-bind="person.first" /> 
          </p> 

          <p> 
              <label>Last Name</label><br /> 
              <input class="title" type="text" data-bind="person.last" /> 
          </p> 
        </fieldset> 
    </form> 

    <h2 data-showif="person.hasName" data-mixin="animation">Hello, <span data-bind="person.full"></span></h2> 

    <button data-bind-disabled="person.hasName | not" data-event-click="person.reset">Reset</button> 
</div> 





























































<!-- This enables us to run coffeescript below. --->
<script>(function(){var s="script",n='\n',d=document,b=d.getElementsByTagName(s);b=b[b.length-2].innerHTML.split(n); d.write('<'+s+' type="text/coffeescript">'+b.slice(2,b.length-2).join(n)+'</'+s+'>');})()</script>

CSS

body {
    background-color: #f0f0f0;
}

#container {
    display: block;
    width: 400px;
    margin: 0 auto;
    margin-top: 30px;
}

h2 {
  clear: both;
}

CoffeeScript

class Hello extends Batman.App

class Person extends Batman.Model
  @accessor 'full', -> "#{@get('first') or ''} #{@get('last') or ''}"
  @accessor 'hasName', -> @get('first') or @get('last')

class PersonsController extends Batman.Controller
  index: ->
    @set aperson, new Person
    
Hello.person = new Person()
Hello.run()