| 1 | <!DOCTYPE html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 | <title>Hello Batman</title>
|
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
| 6 |
|
| 7 | <link rel="stylesheet" href="resources/reset.css" type="text/css">
|
| 8 | <link rel="stylesheet" href="resources/hello.css" type="text/css">
|
| 9 |
|
| 10 | <script src="../lib/coffee-script.js"></script>
|
| 11 | <script src="../lib/es5-shim.js"></script>
|
| 12 | <script src="../lib/batman.js"></script>
|
| 13 | <script src="../lib/batman.solo.js"></script>
|
| 14 | </head>
|
| 15 |
|
| 16 | <body>
|
| 17 | <div id="container">
|
| 18 | <h1 data-mixin="animation" data-hideif="person.hasName">Please enter your name</h1>
|
| 19 |
|
| 20 | <form class="span-12">
|
| 21 | <fieldset>
|
| 22 | <p>
|
| 23 | <label>First Name</label><br />
|
| 24 | <input class="title" type="text" data-bind="person.firstName" />
|
| 25 | </p>
|
| 26 |
|
| 27 | <p>
|
| 28 | <label>Last Name</label><br />
|
| 29 | <input class="title" type="text" data-bind="person.lastName" />
|
| 30 | </p>
|
| 31 | </fieldset>
|
| 32 | </form>
|
| 33 |
|
| 34 | <h2 data-showif="person.hasName" data-mixin="animation">Hello, <span data-bind="person.fullName"></span></h2>
|
| 35 |
|
| 36 | <button data-bind-disabled="person.hasName | not" data-event-click="person.reset">Reset</button>
|
| 37 | </div>
|
| 38 |
|
| 39 | <script type="text/coffeescript">
|
| 40 | class Hello extends Batman.App
|
| 41 |
|
| 42 | class Person extends Batman.Model
|
| 43 | @accessor 'fullName', -> "#{@get('firstName') or ''} #{@get('lastName') or ''}"
|
| 44 | @accessor 'hasName', -> @get('firstName') or @get('lastName')
|
| 45 |
|
| 46 | reset: =>
|
| 47 | @set 'firstName', ''
|
| 48 | @set 'lastName', ''
|
| 49 | @
|
| 50 |
|
| 51 | Hello.person = (new Person()).reset()
|
| 52 | Hello.run()
|
| 53 | </script>
|
| 54 | </body>
|
| 55 | </html>
|