tp5

R4.01_R4.A.10/td_tp/tp5/ex1/todo.riot

@@ -0,0 +1,63 @@
+<todo>
+<h3>{ props.title }</h3>
+
+<ul>
+	<li each={ todo in state.todos } key = {todo.id}>
+		<label class={ todo.done ? 'completed' : '' }>
+		<input
+	    type="checkbox"
+	    checked = { todo.done }
+	    onclick = { () => toggle(todo) } />
+	    { todo.title } 
+		</label>
+		<span class="destroy" onclick={() => remove(todo)}></span>
+	</li>
+</ul>
+
+<form onsubmit={ add }>
+	<input oninput={ edit } />
+	<button disabled={ !state.text }>
+		Add #{ state.todos.length + 1 }
+	</button>
+	<button onclick={ clear }>Clear done</button>
+	<ul class="filters">
+		<li><span>0 todos left</span> </li>
+		<li>  <a href="#"> All</a></li>
+		<li>  <a href="#">Active</a></li>
+		<li>  <a href="#">Done</a></li>
+	</ul>
+</form>
+
+<script>
+	export default {
+		onBeforeMount(props, state) {
+			// initial state
+			this.state = {
+				todos: props.todos,
+				text: '',
+			}
+		},
+
+		edit(e) {
+			// update only the text state
+			this.update({
+				text: e.target.value
+			})
+		},
+		clear(e) {
+			// TODO
+
+		},
+		add(e) {
+			// TODO
+		},
+		toggle(todo) {
+			todo.done = !todo.done
+			this.update()
+		},
+		remove(todo){
+			// TODO
+		}
+	}
+</script>
+</todo>