Hello World

Literally the simplest example of using batman.js data bindings. I'm not even going to bother writing a description.

Launch Demo. The completed code can be found in the repo.

Layout and Application

<!DOCTYPE html>
<html>
<head>
    <title>Hello Batman</title>

    <link rel="stylesheet" href="resources/reset.css" type="text/css">
    <link rel="stylesheet" href="resources/hello.css" type="text/css">

    <script src="lib/es5-shim.js"></script>
    <script src="lib/batman.js"></script>
    <script src="lib/coffee-script.js"></script>
</head>

<body>
    <div id="container">

        <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.firstName" />
              </p>

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

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

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

    <script type="text/coffeescript">
      class window.Hello extends Batman.App

      class Person extends Batman.Model
        @accessor 'fullName', -> "#{@get('firstName')} #{@get('lastName')}"
        @accessor 'hasName', -> @get('fullName').length > 1

        reset: =>
          @set 'firstName', ''
          @set 'lastName', ''

      Hello.person = new Person
      Hello.run()
    </script>
</body>
</html>

All the included resources may be found in the download above.

Fin

Launch Demo. The completed code can be found in the repo.