From 60023f6f7e3d120c39ceea1bb65c4ea13fa90b01 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 9 Jun 2019 16:07:49 -0400 Subject: [PATCH] tweak some content and styles --- site/content/docs/02-template-syntax.md | 145 ++++++++++++------------ site/src/routes/docs/_sections.js | 16 ++- 2 files changed, 87 insertions(+), 74 deletions(-) diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index bc82e7b8ae..adef3d0757 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -101,7 +101,7 @@ Text can also contain JavaScript expressions: ``` -### `{#if ...}` +### {#if ...} ```sv {#if expression}...{/if} @@ -138,7 +138,7 @@ Additional conditions can be added with `{:else if expression}`, optionally endi ``` -### `{#each ...}` +### {#each ...} ```sv {#each expression as name}...{/each} @@ -209,7 +209,7 @@ An each block can also have an `{:else}` clause, which is rendered if the list i ``` -### `{#await ...}` +### {#await ...} ```sv {#await expression}...{:then name}...{:catch name}...{/await} @@ -263,7 +263,7 @@ If you don't care about the pending state, you can also omit the initial block. ``` -### `{@html ...}` +### {@html ...} ```sv {@html expression} @@ -283,7 +283,7 @@ In a text expression, characters like `<` and `>` are escaped. With HTML express ``` -### `{@debug ...}` +### {@debug ...} ```sv {@debug} @@ -333,7 +333,10 @@ The `{@debug}` tag without any arguments will insert a `debugger` statement that ### Element directives -#### on:*event* +As well as attributes, elements can have *directives*, which control the element's behaviour in some way. + + +#### [on:*eventname*](on_component_event) ```sv on:eventname={handler} @@ -420,17 +423,11 @@ It's possible to have multiple event listeners for the same event: ``` -#### bind:*name* +#### [bind:*property*](bind_element_property) ```sv bind:property={variable} ``` -```sv -bind:group={variable} -``` -```sv -bind:this={dom_node} -``` --- @@ -464,53 +461,8 @@ Numeric input values are coerced; even though `input.value` is a string as far a ``` -#### `bind:group` - ---- - -Inputs that work together can use `bind:group`. - -```html - - - - - - - - - - - - -``` - -#### `bind:this` (elements) - ---- - -To get a reference to a DOM node, use `bind:this`. - -```html - - - -``` - -#### Binding `` value --- @@ -550,7 +502,7 @@ When the value of an `