<!DOCTYPE html>
<html lang="en">
<head>
  <title>$App$</title>
  
  <script src="lib/coffee-script.js"></script>
  <script src="lib/batman.js"></script>
  
  <style>
  * {
    font-family: "Myriad Pro", Arial, sans-serif;
  }
  
  #batman {
    width: 250px;
    margin: 0 auto;
    margin-top: 300px;
    text-align: center;
  }
  
  #batman img {
    margin-left: -43px;
    margin-top: -22px;
  }
  
  #batman input {
    font-size: 1.6em;
    font-weight: bold;
    color: #999;
    text-align: center;
    width: 250px;
    margin-bottom: 50px;
  }
  </style>
</head>

<body>
  <div data-yield="main"></div>
  
  <div id="batman">
    <input data-bind="$App$.name" />
    <code>powered by</code><br />
    <img src="resources/batman.png" />
  </div>
  
  <script type="text/coffeescript">
  class $App$ extends Batman.App
    @controller 'app'
    @root 'app.index'
    
    name: '$App$'
  
  $App$.run()
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>$App$</title>
  
  <script src="lib/coffee-script.js"></script>
  <script src="lib/batman.js"></script>
  
  <style>
  * {
    font-family: "Myriad Pro", Arial, sans-serif;
  }
  
  #batman {
    width: 250px;
    margin: 0 auto;
    margin-top: 300px;
    text-align: center;
  }
  
  #batman img {
    margin-left: -43px;
    margin-top: -22px;
  }
  
  #batman input {
    font-size: 1.6em;
    font-weight: bold;
    color: #999;
    text-align: center;
    width: 250px;
    margin-bottom: 50px;
  }
  </style>
</head>

<body>
  <div data-yield="main"></div>
  
  <div id="batman">
    <input data-bind="App.name" />
    <code>powered by</code><br />
    <img src="resources/batman.png" />
  </div>
  
  <script type="text/coffeescript">
  class $App$ extends Batman.App
    @controller 'app'
    @root 'app.index'
    
    name: '$App$'
  
  $App$.run()
  </script>
</body>
</html>

Fix a bug in app template.
Fix a bug in app template.