ktusznio/gist:1334781

## gistfile1.js
<!DOCTYPE html>
<html>
<head>
    <title>Alfred: Batman's Todos</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="resources/alfred.css" type="text/css">

    <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">

        <form data-formfor-author="controllers.todos.emptyAuthor" data-event-submit="controllers.todos.createAuthor">
          <input type="text" placeholder="author" data-bind="author.name"></input>
          <input type="submit"></input>
        </form>

        <ul id="authors">
          <li data-foreach-author="Author.all">
              <div data-bind="author.name"></div>

              <form data-formfor-todo="controllers.todos.emptyTodo" data-event-submit="author.createTodo">
                <input type="text" placeholder="todo" data-bind="todo.body"></input>
                <input type="submit"></input>
              </form>

              <ul>
                <li data-foreach-todo="author.todos">
                  <input type="checkbox" data-bind="todo.isDone" data-event-change="todo.save" />
                  <label data-bind="todo.body" data-addclass-done="todo.isDone" data-mixin="editable"></label>
                  <a data-event-click="todo.destroy">delete</a>
                </li>
              </ul>
            </li>

        </ul>
    </div>

    <script type="text/coffeescript">
    Batman.config.pathPrefix = "/examples/associations.html"

    class Alfred extends Batman.App
      @global yes
      @root 'todos#index'

    class Alfred.Todo extends Batman.Model
      @global yes
      @belongsTo 'author'
      @persist Batman.LocalStorage
      @encode 'body', 'isDone'
      body: ''
      isDone: false

    class Alfred.Author extends Batman.Model
      @global yes
      @hasMany 'todos'
      @persist Batman.LocalStorage
      @encode 'name'
      name: ''

      createTodo: =>
        todo = Alfred.get('controllers.todos.emptyTodo')
        todo.set 'author', @
        todo.save (error, record) =>
          throw error if error
          Alfred.set 'controllers.todos.emptyTodo', new Todo

    class Alfred.TodosController extends Batman.Controller
      emptyTodo: null
      emptyAuthor: null

      index: ->
        @set 'emptyTodo', new Todo
        @set 'emptyAuthor', new Author

        Author.load (error, authors) -> throw error if error
        Todo.load (error, todos) -> throw error if error

        @render false

      createAuthor: =>
        @emptyAuthor.save (error, record) =>
          throw error if error
          @set 'emptyAuthor', new Author

    Alfred.run()
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Alfred: Batman's Todos</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="resources/alfred.css" type="text/css">

	<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">

	<form data-formfor-author="controllers.todos.emptyAuthor" data-event-submit="controllers.todos.createAuthor">
	<input type="text" placeholder="author" data-bind="author.name"></input>
	<input type="submit"></input>
	</form>

	<ul id="authors">
	<li data-foreach-author="Author.all">
	<div data-bind="author.name"></div>

	<form data-formfor-todo="controllers.todos.emptyTodo" data-event-submit="author.createTodo">
	<input type="text" placeholder="todo" data-bind="todo.body"></input>
	<input type="submit"></input>
	</form>

	<ul>
	<li data-foreach-todo="author.todos">
	<input type="checkbox" data-bind="todo.isDone" data-event-change="todo.save" />
	<label data-bind="todo.body" data-addclass-done="todo.isDone" data-mixin="editable"></label>
	<a data-event-click="todo.destroy">delete</a>
	</li>
	</ul>
	</li>

	</ul>
	</div>

	<script type="text/coffeescript">
	Batman.config.pathPrefix = "/examples/associations.html"

	class Alfred extends Batman.App
	@global yes
	@root 'todos#index'

	class Alfred.Todo extends Batman.Model
	@global yes
	@belongsTo 'author'
	@persist Batman.LocalStorage
	@encode 'body', 'isDone'
	body: ''
	isDone: false

	class Alfred.Author extends Batman.Model
	@global yes
	@hasMany 'todos'
	@persist Batman.LocalStorage
	@encode 'name'
	name: ''

	createTodo: =>
	todo = Alfred.get('controllers.todos.emptyTodo')
	todo.set 'author', @
	todo.save (error, record) =>
	throw error if error
	Alfred.set 'controllers.todos.emptyTodo', new Todo

	class Alfred.TodosController extends Batman.Controller
	emptyTodo: null
	emptyAuthor: null

	index: ->
	@set 'emptyTodo', new Todo
	@set 'emptyAuthor', new Author

	Author.load (error, authors) -> throw error if error
	Todo.load (error, todos) -> throw error if error

	@render false

	createAuthor: =>
	@emptyAuthor.save (error, record) =>
	throw error if error
	@set 'emptyAuthor', new Author

	Alfred.run()
	</script>
	</body>
	</html>