From dfdbba3ddecfcb83e36948bf35efe609be096ead Mon Sep 17 00:00:00 2001 From: Luca Bonavita Date: Sat, 18 Jul 2020 13:19:07 +0100 Subject: [PATCH] site: document a gotcha when using `on:` and `bind:` together Closes #4616 --- site/content/docs/02-template-syntax.md | 20 ++++++ .../11-component-bindings/meta.json | 2 +- .../05-bindings/12-binding-gotcha/App.svelte | 63 ++++++++++++++++++ .../05-bindings/12-binding-gotcha/meta.json | 3 + .../examples/thumbnails/binding-gotcha.jpg | Bin 0 -> 9383 bytes 5 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 site/content/examples/05-bindings/12-binding-gotcha/App.svelte create mode 100644 site/content/examples/05-bindings/12-binding-gotcha/meta.json create mode 100644 site/static/examples/thumbnails/binding-gotcha.jpg diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 070dc46687..11f59e3edc 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -545,6 +545,26 @@ Numeric input values are coerced; even though `input.value` is a string as far a ``` +##### A gotcha when using `on:` and `bind:` together + +Note that if you add an event handler and bind a property, they will be executed in the order you write them in the template. + +--- + +For example, here `onChange` will be attached (and called) before the internal event handler added by `bind:value`. + +```sv + +``` + +--- + +In the opposite case, if `bind:value` is before `on:change` then your change handler will see the updated bound value. + +```sv + +``` + ##### Binding ` + {#each items as item} + + {/each} + + +

This dropdown works as expected because bind:value is before on:change so that your change handler sees the updated bound value.

+ +

❗️ Event handler first

+ + +

This dropdown won't work (*) because by placing the on:change before the bind:value your event handler gets attached (and called) before the internal event handler added by bind:value.

+ +

(*) On Firefox both the dropdown and the selected value the won't update. On Chrome, the dropdown updates but the selected value won't.

+ +

Selected value

+ + + diff --git a/site/content/examples/05-bindings/12-binding-gotcha/meta.json b/site/content/examples/05-bindings/12-binding-gotcha/meta.json new file mode 100644 index 0000000000..fd0c67e609 --- /dev/null +++ b/site/content/examples/05-bindings/12-binding-gotcha/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Binding gotcha" +} diff --git a/site/static/examples/thumbnails/binding-gotcha.jpg b/site/static/examples/thumbnails/binding-gotcha.jpg new file mode 100644 index 0000000000000000000000000000000000000000..415ac3d2a7bfb65edb03ca6142a5a342717163c4 GIT binary patch literal 9383 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 K65sPwcje#DD@~aI literal 0 HcmV?d00001