ktusznio/gist:1249409

## gistfile1.js
<!DOCTYPE html>
<html>
<head>
  <title>Test App</title>
  <script type="text/javascript" src="../lib/es5-shim.js"></script>
  <script type="text/javascript" src="../lib/batman.js"></script>
  <script type="text/javascript" src="../lib/batman.solo.js"></script>
  <script type="text/javascript" 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-showif="person.hasName" data-mixin="animation">Hello, <span data-bind="person.fullName"></span></h2>

    <ul>
        <form data-formfor-category="emptyCategory" data-event-submit="Hello.createCategory">
          <input class="new-item" placeholder="Add category title" data-bind="category.title" />
        </form>

        <li data-foreach-category="Category.all">
          <span class="new-item" data-bind="category.title"></span>
          <a data-event-click="category.destroy">Remove</a>
        </li>
    </ul>
    <a data-event-click="savePerson">Save Person</a>

    <h2>People</h2>
    <ul>
      <li data-foreach-person="Person.all">
        <span data-bind="person.fullName"></span>
        <ul>
          <li data-foreach-category="person.categories">
            <span data-bind="category.title"></span>
          </li>
      </li>
    </ul>

</div>
<script type="text/coffeescript">
class Hello extends Batman.App
  @global true
  @root "app#index"
  @createCategory: =>
    @emptyCategory.save (error, record) =>
      throw error if error
      @person.categories.add record
      @set 'emptyCategory', new Category
  @savePerson: =>
    @person.save((error) -> throw error if error)
    Category.all.forEach (category) -> category.destroy()

class Hello.AppController extends Batman.Controller
  index: ->
    console.log 'loading people'
    Person.load (error, people) ->
      throw error if error
      console.log people

    @render false

class Hello.Category extends Batman.Model
  @global true
  @persist Batman.LocalStorage
  @encode 'title'
  title: ''

class Hello.Person extends Batman.Model
  @global true
  @persist Batman.LocalStorage
  @encode 'firstName', 'lastName', 'categories'
  @accessor 'fullName', -> "#{@get('firstName') or ''} #{@get('lastName') or ''}"
  @accessor 'hasName', -> @get('firstName') or @get('lastName')
  categories: new Batman.SortableSet

Hello.person = new Person
Hello.emptyCategory = new Category
Hello.run()
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test App</title>
	<script type="text/javascript" src="../lib/es5-shim.js"></script>
	<script type="text/javascript" src="../lib/batman.js"></script>
	<script type="text/javascript" src="../lib/batman.solo.js"></script>
	<script type="text/javascript" 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-showif="person.hasName" data-mixin="animation">Hello, <span data-bind="person.fullName"></span></h2>

	<ul>
	<form data-formfor-category="emptyCategory" data-event-submit="Hello.createCategory">
	<input class="new-item" placeholder="Add category title" data-bind="category.title" />
	</form>

	<li data-foreach-category="Category.all">
	<span class="new-item" data-bind="category.title"></span>
	<a data-event-click="category.destroy">Remove</a>
	</li>
	</ul>
	<a data-event-click="savePerson">Save Person</a>

	<h2>People</h2>
	<ul>
	<li data-foreach-person="Person.all">
	<span data-bind="person.fullName"></span>
	<ul>
	<li data-foreach-category="person.categories">
	<span data-bind="category.title"></span>
	</li>
	</li>
	</ul>

	</div>
	<script type="text/coffeescript">
	class Hello extends Batman.App
	@global true
	@root "app#index"
	@createCategory: =>
	@emptyCategory.save (error, record) =>
	throw error if error
	@person.categories.add record
	@set 'emptyCategory', new Category
	@savePerson: =>
	@person.save((error) -> throw error if error)
	Category.all.forEach (category) -> category.destroy()

	class Hello.AppController extends Batman.Controller
	index: ->
	console.log 'loading people'
	Person.load (error, people) ->
	throw error if error
	console.log people

	@render false

	class Hello.Category extends Batman.Model
	@global true
	@persist Batman.LocalStorage
	@encode 'title'
	title: ''

	class Hello.Person extends Batman.Model
	@global true
	@persist Batman.LocalStorage
	@encode 'firstName', 'lastName', 'categories'
	@accessor 'fullName', -> "#{@get('firstName') or ''} #{@get('lastName') or ''}"
	@accessor 'hasName', -> @get('firstName') or @get('lastName')
	categories: new Batman.SortableSet

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