   # Its style will be determined based on the completion state.
   render: ->
     style =
-      textDecoration: if @props.todo.complete then "line-through" else ""
+      textDecoration:
+        if @props.todo.complete then "line-through" else ""
 
-    <span style={style} onClick={@onClick}>{@props.todo.text}</span>
+    <span style={style} onClick={@onClick}>
+      {@props.todo.text}
+    </span>
 
   # Clicking on a todo item will toggle the completion state.
   onClick: ->
-    @getFlux().actions.toggleTodo @props.todo.id
+    @getFlux.actions.toggleTodo(@props.todo.id)
 
-# Render the component.
+# Rendering the whole component
 document.addEventListener 'DOMContentLoaded', (e) ->
-  React.render <Application flux={flux} />,
-                document.getElementById 'react_mountPoint'
+  React.render <Application flux={flux}/>,
+                document.getElementById('react_mountPoint')

    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]

                 constants.CLEAR_TODOS, @onClearTodos)

  onAddTodo: (payload) ->
    id = @_nextTodoId
    todo =
      id:       id
      text:     payload.text
      complete: false
    @todos[id] = todo
    @emit 'change'

