diff --git a/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte new file mode 100644 index 0000000000..a46c61c7e7 --- /dev/null +++ b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte @@ -0,0 +1,52 @@ + + +

Size

+ + + + + + + +

Flavours

+ +{#each menu as flavour} + +{/each} + +{#if flavours.length === 0} +

Please select at least one flavour

+{:else if flavours.length > scoops} +

Can't order more flavours than scoops!

+{:else} +

+ You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} + of {join(flavours)} +

+{/if} diff --git a/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte new file mode 100644 index 0000000000..d808850158 --- /dev/null +++ b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte @@ -0,0 +1,53 @@ + + +

Size

+ + + + + + + +

Flavours

+ + + +{#if flavours.length === 0} +

Please select at least one flavour

+{:else if flavours.length > scoops} +

Can't order more flavours than scoops!

+{:else} +

+ You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} + of {join(flavours)} +

+{/if} diff --git a/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md b/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md new file mode 100644 index 0000000000..f6137d3f1d --- /dev/null +++ b/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md @@ -0,0 +1,19 @@ +--- +title: Select multiple +--- + +A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value. + +Returning to our [earlier ice cream example](tutorial/group-inputs), we can replace the checkboxes with a ` + {#each menu as flavour} + + {/each} + +``` \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/08-each-block-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/08-each-block-bindings/app-b/App.svelte new file mode 100644 index 0000000000..92bdc7754f --- /dev/null +++ b/site/content/tutorial/06-bindings/08-each-block-bindings/app-b/App.svelte @@ -0,0 +1,39 @@ + + +

Todos

+ +{#each todos as todo} +
+ + + +
+{/each} + + + + diff --git a/site/content/tutorial/06-bindings/08-each-block-bindings/text.md b/site/content/tutorial/06-bindings/08-each-block-bindings/text.md new file mode 100644 index 0000000000..85359d6825 --- /dev/null +++ b/site/content/tutorial/06-bindings/08-each-block-bindings/text.md @@ -0,0 +1,7 @@ +--- +title: Each block bindings +--- + +You can even bind to properties inside an `each` block. + +TODO \ No newline at end of file diff --git a/site/content/tutorial/99-todo/99-todo/text.md b/site/content/tutorial/99-todo/99-todo/text.md index f02078dccd..9b0f6437d3 100644 --- a/site/content/tutorial/99-todo/99-todo/text.md +++ b/site/content/tutorial/99-todo/99-todo/text.md @@ -67,7 +67,8 @@ Another one should cover how to set up an editor for syntax highlighting. ## Bindings -* [ ] Form bindings (input, textarea, select, multiple select) +* [x] Form bindings (input, textarea, select, multiple select) +* [ ] deep/contextual bindings * [ ] Dimensions * [ ] `this` * [ ] shorthand