batman keypath test

gistfile1.coffee

# Create our application and namespace.
class Alfred extends Batman.App
  @global yes

  # setup our root route. When the app starts up, it will automatically call TodosController::index
  @root 'todos#index'


# Define the principal Todo model with `body` and `isDone` attributes, and tell it to persist itself using Local Storage.
class Alfred.Todo extends Batman.Model
  # @global exposes this class on the global object, so you can access `Todo` directly.
  @global yes

  # @persist tells a model which storage mechanism it should use to load and save. Batman.LocalStorage is the simplest, simply persisting your records to the browser storage.
  @persist Batman.LocalStorage

  # @encode tells the persistence mechanism which fields to archive. You can also setup specific encoder and decoder functions to handle specific types of data.
  @encode 'body', 'isDone', 'bank'#, 'bank.name'

  @validate 'body', presence: yes
  
  # just some defaults, but these are optional
  body: ''
  bank: {}
  isDone: false

class Alfred.TodosController extends Batman.Controller
  emptyTodo: null

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

    # add some example todos to show off.
    Todo.load (error, todos) ->
      # you always want to make sure you handle errors (more elegantly than this) when writing connection code
      throw error if error
      if not todos.length
        callback = (error) -> throw error if error
        new Todo(body: 'joker escaped arkham again', isDone: true).save(callback)
        new Todo(body: 'riddler sent riemann hypothesis', bank: {name: "NASPA", no: "111111"}).save(callback)
        new Todo(body: 'bane wants to meet, not worried').save(callback)

    # return false to prevent the implicit render of views/todos/index.html
    return false

  create: =>
    @emptyTodo.save (error, record) =>
      throw error if error
      console.log "record", record
      # we use set so that our form will automatically update with the new Todo instance
      @set 'emptyTodo', new Todo
    return false

  new: =>
    console.log "new"#, Todo.toJSON()
    callback = (error) -> throw error if error
    new Todo(body: 'test', bank: {name: "NASPA", no: "111111"}).save(callback)

Alfred.run()

html

        #batman.view
          h1 Alfred
            form(data-formfor-todo="controllers.todos.emptyTodo")
              input(class="new-item", placeholder="add a todo item", data-bind="todo.body")
              input(class="new-item", placeholder="add a bank name", data-bind="todo.bank.name")
              button(data-event-click="controllers.todos.create") speichern

            ul#items
              li(data-foreach-todo="Todo.all", data-mixin="animation")
                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")
                span(data-bind="todo.bank.name")
                span(data-bind="todo.bank.no")
                a(data-event-click="todo.destroy") delete
          
              li
                span(data-bind="Todo.all.length")
                span(data-bind="'item' | pluralize Todo.all.length")
            
            button(data-event-click="controllers.todos.new") new TODO

html file

<div id="batman" class="view"><h1>Alfred<form data-formfor-todo="controllers.todos.emptyTodo"><input placeholder="add a todo item" data-bind="todo.body" class="new-item"><input placeholder="add a bank name" data-bind="todo.bank" class="new-item"><button data-event-click="controllers.todos.create">speichern</button></form><ul id="items"><li data-mixin="animation"><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" class=" done">joker escaped arkham again</label><span data-bind="todo.bank.name"></span><span data-bind="todo.bank.no"></span><a data-event-click="todo.destroy" href="#">delete</a></li><li data-mixin="animation"><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">riddler sent riemann hypothesis</label><span data-bind="todo.bank.name">NASPA</span><span data-bind="todo.bank.no">111111</span><a data-event-click="todo.destroy" href="#">delete</a></li><li data-mixin="animation"><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">bane wants to meet, not worried</label><span data-bind="todo.bank.name"></span><span data-bind="todo.bank.no"></span><a data-event-click="todo.destroy" href="#">delete</a></li><li data-mixin="animation"><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">test</label><span data-bind="todo.bank.name">NASPA</span><span data-bind="todo.bank.no">111111</span><a data-event-click="todo.destroy" href="#">delete</a></li><li data-mixin="animation"><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">qqqq</label><span data-bind="todo.bank.name"></span><span data-bind="todo.bank.no"></span><a data-event-click="todo.destroy" href="#">delete</a></li><li data-mixin="animation"><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">aa</label><span data-bind="todo.bank.name"></span><span data-bind="todo.bank.no"></span><a data-event-click="todo.destroy" href="#">delete</a></li><li><span data-bind="Todo.all.length">6</span><span data-bind="'item' | pluralize Todo.all.length">items</span></li></ul><button data-event-click="controllers.todos.new">new TODO</button></h1></div>

htmlfile

<div id="batman" class="view">

<form data-formfor-todo="controllers.todos.emptyTodo">
  <input placeholder="add a todo item" data-bind="todo.body" class="new-item">
  <input placeholder="add a bank name" data-bind="todo.bank.name" class="new-item">
  <button data-event-click="controllers.todos.create">speichern</button>
</form>

<ul id="items">
  <li data-mixin="animation">
    <input type="checkbox" data-bind="todo.isDone" data-event-change="todo.save">
    <span data-bind="todo.body" data-addclass-done="todo.isDone" data-mixin="editable" class=" done"></span>
    <span data-bind="todo.bank.name"></span>
    <a data-event-click="todo.destroy" href="#">delete</a>
</li>

<button data-event-click="controllers.todos.new">new TODO</button>
</div>