too hot!
-{:else if 80 > porridge.temperature} -too cold!
-{:else} -just right!
-{/if} ++ {#if porridge.temperature > 100} + too hot! + {:else if 80 > porridge.temperature} + too cold! + {:else} + just right! + {/if} +
``` +(Blocks don't have to wrap elements, they can also wrap text within elements!) + ### {#each ...} diff --git a/site/content/tutorial/04-logic/02-else-blocks/text.md b/site/content/tutorial/04-logic/02-else-blocks/text.md index d25a7d3897..2c494704bc 100644 --- a/site/content/tutorial/04-logic/02-else-blocks/text.md +++ b/site/content/tutorial/04-logic/02-else-blocks/text.md @@ -16,4 +16,11 @@ Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are {/if} ``` -> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML. \ No newline at end of file +> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML. + +Svelte is really good at surgically updating only the parts of the DOM that need changing, including text nodes. However, it does not optimise common code in if/else blocks like this, so the ` diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte index b82d31e783..36376b7fe9 100644 --- a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte +++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte @@ -7,12 +7,14 @@ Yes! Send me regular email spam -{#if yes} -Thank you. We will bombard your inbox and sell your personal details.
-{:else} -You must opt in to continue. If you're not paying, you're the product.
-{/if} ++ {#if yes} + Thank you. We will bombard your inbox and sell your personal details. + {:else} + You must opt in to continue. If you're not paying, you're the product. + {/if} +
\ No newline at end of file + diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte index 5ea04f4e95..13732e5671 100644 --- a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte +++ b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte @@ -42,13 +42,13 @@ Raspberry ripple -{#if flavours.length === 0} -Please select at least one flavour
-{:else if flavours.length > scoops} -Can't order more flavours than scoops!
-{:else} -+
+ {#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} + {/if} + diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte index a46c61c7e7..a36010a0bc 100644 --- a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte +++ b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte @@ -40,13 +40,13 @@ {/each} -{#if flavours.length === 0} -Please select at least one flavour
-{:else if flavours.length > scoops} -Can't order more flavours than scoops!
-{:else} -+
+ {#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} + {/if} + 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 index a46c61c7e7..a36010a0bc 100644 --- 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 @@ -40,13 +40,13 @@ {/each} -{#if flavours.length === 0} -Please select at least one flavour
-{:else if flavours.length > scoops} -Can't order more flavours than scoops!
-{:else} -+
+ {#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} + {/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 index d808850158..21320c87a7 100644 --- 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 @@ -41,13 +41,13 @@ {/each} -{#if flavours.length === 0} -Please select at least one flavour
-{:else if flavours.length > scoops} -Can't order more flavours than scoops!
-{:else} -+
+ {#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} + {/if} +