ypeescript

public render()
    const todos = @.props.model.todos

    let shownTodos = todos.filter (todo) ->
      switch @.state.nowShowing
        case ACTIVE_TODOS:
          -< !todo.completed
        case COMPLETED_TODOS:
          -< todo.completed
        default:
          -< true

    let activeTodoCount = todos.reduce
      (accum, todo) -> todo.completed ? accum : accum + 1
      , 0

    let completedCount = todos.length - activeTodoCount

    -< 
    <div>
      <header className="header">
        <h1> todos 
        <input
          ref="newField"
          className="new-todo"
          placeholder="What needs to be done?"
          onKeyDown={ e -> @.handleNewTodoKeyDown(e) }
          autoFocus={true} 
        />
      {do todos.length ?
            <section className="main">
                <input
                    className="toggle-all"
                    type="checkbox"
                    onChange={ e -> @.toggleAll(e) }
                    checked={activeTodoCount === 0}
                />
                <ul className="todo-list">
                    {do shownTodos.map (todo) ->
                        -< 
                        <TodoItem
                            key={todo.id}
                            todo={todo}
                            onToggle={@.toggle.bind(@, todo)}
                            onDestroy={@.destroy.bind(@, todo)}
                            onEdit={@.edit.bind(@, todo)}
                            editing={@.state.editing === todo.id}
                            onSave={@.save.bind(@, todo)}
                            onCancel={ e -> @.cancel() }
                        />
                    }
        : null
      }
      {do (activeTodoCount || completedCount) ?
          <TodoFooter
            count={activeTodoCount}
            completedCount={completedCount}
            nowShowing={@.state.nowShowing}
            onClearCompleted={e -> @.clearCompleted()}
          />
        : null
      }

let model = new TodoModel('react-todos')

let render = ->
  React.render
    <TodoApp model={model}/>,
    document.getElementsByClassName('todoapp')[0]


model.subscribe(render)
render()