38 lines
1.6 KiB
TypeScript
38 lines
1.6 KiB
TypeScript
//@filename: file.tsx
|
|
//@jsx: react
|
|
//@reactNamespace: vdom
|
|
|
|
declare var vdom: any;
|
|
declare var ctrl: any;
|
|
declare var model: any;
|
|
|
|
// A simple render function with nesting and control statements
|
|
let render = (ctrl, model) =>
|
|
<section class="todoapp">
|
|
<header class="header">
|
|
<h1>todos <x></h1>
|
|
<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" value={model.newTodo} onKeyup={ctrl.addTodo.bind(ctrl, model)} />
|
|
</header>
|
|
<section class="main" style={{display:(model.todos && model.todos.length) ? "block" : "none"}}>
|
|
<input class="toggle-all" type="checkbox" onChange={ctrl.toggleAll.bind(ctrl)}/>
|
|
<ul class="todo-list">
|
|
{model.filteredTodos.map((todo) =>
|
|
<li class={{todo: true, completed: todo.completed, editing: todo == model.editedTodo}}>
|
|
<div class="view">
|
|
{(!todo.editable) ?
|
|
<input class="toggle" type="checkbox"></input>
|
|
: null
|
|
}
|
|
<label onDoubleClick={()=>{ctrl.editTodo(todo)}}>{todo.title}</label>
|
|
<button class="destroy" onClick={ctrl.removeTodo.bind(ctrl,todo)}></button>
|
|
<div class="iconBorder">
|
|
<div class="icon"/>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
|