   onClearTodos: ->
     todos = @todos
     Object.keys(todos).forEach (key) ->
-      if todos[key].complete
-        delete todos[key]
+      delete todos[key] if todos[key].complete
     @emit 'change'
 
-  getState:    -> todos: @todos
+  getState: ->
+    todos: @todos
 
-  _nextTodoId: -> @todoId += 1
+  _nextTodoId: ->
+    @todoId += 1
 
 # Semantic actions
 

    newTodoText: ""

  getStateFromFlux: ->
    flux = @getFlux()
    flux.store('TodoStore').getState()

  handleTodoTextChange: (e) ->
    @setState { newTodoText: e.target.value }

  onSubmitForm: (e) ->
    e.preventDefault()
    if @state.newTodoText.trim()
      @getFlux().actions.addTodo @state.newTodoText
      @setState { newTodoText: "" }

  clearCompletedTodos: (e) ->
    @getFlux().actions.clearTodos()

  render: ->
    todos = @state.todos
    <div>
      <form onSubmit={@onSubmitForm}>
        <div className="form-group">
          <input type="text" placeholder="New Todo"
                 value={@state.newTodoText}
                 onChange={@handleTodoTextChange}
                 className="form-control" />
        </div>
        <div className="form-group">
          <input type="submit" value="Add Todo" className="btn btn-success"/>
          <button onClick={@clearCompletedTodos} className="btn btn-default">Clear Completed</button>
        </div>
      </form>

      <ul>
        {
          Object.keys(todos).map (id) ->
            <li key={id}><TodoItem todo={todos[id]} /></li>;
        }
      </ul>
    </div>

# The React component (<TodoItem/>)

TodoItem = React.createClass
  mixins: [FluxMixin]

  toggleTodo: (id) -> @dispatch constants.TOGGLE_TODO, id:   id
  clearTodos:      -> @dispatch constants.CLEAR_TODOS

# Instantiating our stores

stores =
  TodoStore: new TodoStore

# Creation of a Flux instance

flux = new Fluxxor.Flux(stores, actions)

# Logging upon the "dispatch" event
