contextual binding tutorial

site/content/tutorial/06-bindings/08-each-block-bindings/app-a/App.svelte

@@ -0,0 +1,39 @@
+<script>
+	let todos = [
+		{ done: false, text: 'finish Svelte tutorial' },
+		{ done: false, text: 'build an app' },
+		{ done: false, text: 'world domination' }
+	];
+
+	function add() {
+		todos = todos.concat({ done: false, text: '' });
+	}
+
+	function clear() {
+		todos = todos.filter(t => !t.done);
+	}
+</script>
+
+<h1>Todos</h1>
+
+{#each todos as todo}
+	<div>
+		<input
+			type=checkbox
+			checked={todo.done}
+		>
+
+		<input
+			placeholder="What needs to be done?"
+			value={todo.text}
+		>
+	</div>
+{/each}
+
+<button on:click={add}>
+	Add new
+</button>
+
+<button on:click={clear}>
+	Clear completed
+</button>

site/content/tutorial/06-bindings/08-each-block-bindings/text.md

@@ -4,4 +4,16 @@ title: Each block bindings
 
 You can even bind to properties inside an `each` block.
 
-TODO
+```html
+<input
+	type=checkbox
+	bind:checked={todo.done}
+>
+
+<input
+	placeholder="What needs to be done?"
+	bind:value={todo.text}
+>
+```
+
+> Note that interacting with these `<input>` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.

site/content/tutorial/99-todo/99-todo/text.md

@@ -68,7 +68,7 @@ Another one should cover how to set up an editor for syntax highlighting.
 ## Bindings
 
 * [x] Form bindings (input, textarea, select, multiple select)
-* [ ] deep/contextual bindings
+* [x] deep/contextual bindings
 * [ ] Dimensions
 * [ ] `this`
 * [ ] shorthand