Skip to content

Commit f82de86

Browse files
author
Rich Harris
committed
tweaks
1 parent 327eed6 commit f82de86

File tree

4 files changed

+63
-83
lines changed

4 files changed

+63
-83
lines changed

‎content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@ Checkboxes are used for toggling between states. Instead of binding to `input.va
66

77
```svelte
88
/// file: App.svelte
9-
<input type=checkbox bind:checked={yes}>
9+
<input type=checkbox +++bind:+++checked={yes}>
1010
```

‎content/tutorial/01-svelte/06-bindings/04-group-inputs/README.md

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,28 @@
22
title: Group inputs
33
---
44

5-
If you have multiple inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
5+
If you have multiple `type="radio"` or `type="checkbox"` inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
66

7-
Add `bind:group` to each input:
7+
Add `bind:group={scoops}` to the radio inputs...
88

99
```svelte
1010
/// file: App.svelte
11-
<input type=radio bind:group={scoops} name="scoops" value={1}>
11+
<input
12+
type="radio"
13+
name="scoops"
14+
value={number}
15+
+++bind:group={scoops}+++
16+
/>
1217
```
1318

14-
In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
15-
16-
```js
17-
/// file: App.svelte
18-
let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
19-
```
20-
21-
...then replace the second section:
19+
...and `bind:group={flavours}` to the checkbox inputs:
2220

2321
```svelte
2422
/// file: App.svelte
25-
<h2>Flavours</h2>
26-
27-
{#each menu as flavour}
28-
<label>
29-
<input type=checkbox bind:group={flavours} name="flavours" value={flavour}>
30-
{flavour}
31-
</label>
32-
{/each}
23+
<input
24+
type="checkbox"
25+
name="flavours"
26+
value={flavour}
27+
+++bind:group={flavours}+++
28+
/>
3329
```
34-
35-
It's now easy to expand our ice cream menu in new and exciting directions.

‎content/tutorial/01-svelte/06-bindings/04-group-inputs/app-a/src/lib/App.svelte

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,37 @@
11
<script>
22
let scoops = 1;
3-
let flavours = ['Mint choc chip'];
3+
let flavours = [];
44
5-
function join(flavours) {
6-
if (flavours.length === 1) return flavours[0];
7-
return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
8-
}
5+
const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
96
</script>
107

118
<h2>Size</h2>
129

13-
<label>
14-
<input type=radio group={scoops} name="scoops" value={1}>
15-
One scoop
16-
</label>
10+
{#each [1, 2, 3] as number}
11+
<label>
12+
<input
13+
type="radio"
14+
name="scoops"
15+
value={number}
16+
/>
1717

18-
<label>
19-
<input type=radio group={scoops} name="scoops" value={2}>
20-
Two scoops
21-
</label>
22-
23-
<label>
24-
<input type=radio group={scoops} name="scoops" value={3}>
25-
Three scoops
26-
</label>
18+
{number} {number === 1 ? 'scoop' : 'scoops'}
19+
</label>
20+
{/each}
2721

2822
<h2>Flavours</h2>
2923

30-
<label>
31-
<input type=checkbox group={flavours} name="flavours" value="Cookies and cream">
32-
Cookies and cream
33-
</label>
34-
35-
<label>
36-
<input type=checkbox group={flavours} name="flavours" value="Mint choc chip">
37-
Mint choc chip
38-
</label>
24+
{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
25+
<label>
26+
<input
27+
type="checkbox"
28+
name="flavours"
29+
value={flavour}
30+
/>
3931

40-
<label>
41-
<input type=checkbox group={flavours} name="flavours" value="Raspberry ripple">
42-
Raspberry ripple
43-
</label>
32+
{flavour}
33+
</label>
34+
{/each}
4435

4536
{#if flavours.length === 0}
4637
<p>Please select at least one flavour</p>
@@ -49,6 +40,6 @@
4940
{:else}
5041
<p>
5142
You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
52-
of {join(flavours)}
43+
of {formatter.format(flavours)}
5344
</p>
5445
{/if}

‎content/tutorial/01-svelte/06-bindings/04-group-inputs/app-b/src/lib/App.svelte

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,36 @@
11
<script>
22
let scoops = 1;
3-
let flavours = ['Mint choc chip'];
4-
5-
let menu = [
6-
'Cookies and cream',
7-
'Mint choc chip',
8-
'Raspberry ripple'
9-
];
10-
11-
function join(flavours) {
12-
if (flavours.length === 1) return flavours[0];
13-
return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
14-
}
3+
let flavours = [];
4+
5+
const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
156
</script>
167

178
<h2>Size</h2>
189

19-
<label>
20-
<input type=radio bind:group={scoops} name="scoops" value={1}>
21-
One scoop
22-
</label>
23-
24-
<label>
25-
<input type=radio bind:group={scoops} name="scoops" value={2}>
26-
Two scoops
27-
</label>
28-
29-
<label>
30-
<input type=radio bind:group={scoops} name="scoops" value={3}>
31-
Three scoops
32-
</label>
10+
{#each [1, 2, 3] as number}
11+
<label>
12+
<input
13+
type="radio"
14+
name="scoops"
15+
value={number}
16+
bind:group={scoops}
17+
/>
18+
19+
{number} {number === 1 ? 'scoop' : 'scoops'}
20+
</label>
21+
{/each}
3322

3423
<h2>Flavours</h2>
3524

36-
{#each menu as flavour}
25+
{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavour}
3726
<label>
38-
<input type=checkbox bind:group={flavours} name="flavours" value={flavour}>
27+
<input
28+
type="checkbox"
29+
name="flavours"
30+
value={flavour}
31+
bind:group={flavours}
32+
/>
33+
3934
{flavour}
4035
</label>
4136
{/each}
@@ -47,6 +42,6 @@
4742
{:else}
4843
<p>
4944
You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
50-
of {join(flavours)}
45+
of {formatter.format(flavours)}
5146
</p>
5247
{/if}

0 commit comments

Comments
 (0)