/

Svelte 綁定

Svelte 綁定

如何在 Svelte 中使用綁定

使用 Svelte，您可以在數據和 UI 之間創建雙向綁定。

許多其他 Web 框架可以提供雙向綁定，這是一種非常常見的模式。

在表單中特別有用。

bind:value

讓我們從您通常會使用的最常見的綁定方式開始，您可以使用 bind:value 來應用它。您從組件狀態中獲取一個變量，並將它綁定到表單字段上：

1
2
3
4
5
<script>
let name = ''
</script>

<input bind:value={name}>

現在，如果 name 變量發生變化，輸入字段將更新其值。反之亦然：如果用戶更新表單，則 name 變量的值也會更改。

請注意，該變量必須使用 let/var 關鍵字定義，而不能使用 const，否則它無法被 Svelte 更新，因為 const 定義了一個值無法重新分配的變量。

bind:value 可以用於所有類型的輸入字段（type="number"，type="email" 等），但它也適用於其他類型的字段，比如 textarea 和 select（稍後會詳細介紹 select）。

複選框和單選按鈕

複選框和單選按鈕（input 元素的 type="checkbox" 或 type="radio"）允許以下 3 種綁定方式：

  • bind:checked
  • bind:group
  • bind:indeterminate

bind:checked 允許我們將一個值綁定到元素的選中狀態：

1
2
3
4
5
<script>
let isChecked
</script>

<input type=checkbox bind:checked={isChecked}>

bind:group 對複選框和單選按鈕很有用，因為這些按鈕通常以組的形式使用。使用 bind:group，您可以將一個 JavaScript 數組關聯到一組複選框上，並根據用戶的選擇自動填充它。

以下是一個示例。goodDogs 數組根據我勾選的複選框填充：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
let goodDogs = []
let dogs = ['Roger', 'Syd']
</script>

<h2>
 誰是乖狗狗？
</h2>

<ul>
{#each dogs as dog}
 <li>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></li>
{/each}
</ul>

<h2>
 我認為是乖狗狗的：
</h2>

<ul>
{#each goodDogs as dog}
 <li>{dog}</li>
{/each}
</ul>

參見示例：https://svelte.dev/repl/059c1b5edffc4b058ad36301dd7a1a58

bind:indeterminate 允許我們綁定到元素的 indeterminate 狀態（如果您想了解更多詳情，可以參考 https://css-tricks.com/indeterminate-checkboxes/）。

選擇字段

bind:value 也可以用於 select 表單字段，將所選值自動分配給變量的值：

1
2
3
4
5
6
7
8
9
10
11
<script>
let selected
</script>

<select bind:value={selected}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

{selected}

很酷的是，如果您從對象數組動態生成選項，選擇的選項現在是一個對象不是一個字符串：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
let selected

const goodDogs = [
{ name: 'Roger' },
{ name: 'Syd' }
]
</script>

<h2>可能是好狗的列表：</h2>
<select bind:value={selected}>
{#each goodDogs as goodDog}
<option value={goodDog}>{goodDog.name}</option>
{/each}
</select>

{#if selected}
<h2>
 選擇的好狗狗：{selected.name}
</h2>
{/if}

參見示例：https://svelte.dev/repl/7e06f9b7becd4c57880db5ed184ea0f3

select 還允許使用 multiple 屬性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
let selected = []

const goodDogs = [
 { name: 'Roger' },
 { name: 'Syd' }
]
</script>

<h2>可能是好狗的列表：</h2>
<select multiple bind:value={selected}>
{#each goodDogs as goodDog}
<option value={goodDog}>{goodDog.name}</option>
{/each}
</select>

{#if selected.length}
<h2>選擇的好狗狗：</h2>
<ul>
{#each selected as dog}
 <li>{dog.name}</li>
{/each}
</ul>
{/if}

參見示例：https://svelte.dev/repl/b003248e87f04919a2f9fed63dbdab8c

其他綁定

根據您正在使用的 HTML 標記，您可以應用不同類型的綁定。

bind:files 是對 type="file" 輸入元素有效的綁定，用於綁定所選文件的列表。

details HTML 元素允許使用 bind:open 來綁定其打開/關閉值。

audio 和 video 媒體 HTML 標記允許您綁定它們的多個屬性： currentTime、duration、paused、buffered、seekable、played、volume、playbackRate。

textContent 和 innerHTML 可以在可編輯區域字段 contenteditable 上進行綁定。

對於這些特定的 HTML 元素來說，這些都是非常有用的功能。

只讀綁定

offsetWidth、offsetHeight、clientWidth、clientHeight 可以在任何區塊級 HTML 元素上 只讀 綁定，這些元素不包括無效標籤（如 br）和設置為內聯的元素（display: inline）。

在 JavaScript 中獲取對 HTML 元素的引用

bind:this 是一種特殊類型的綁定，可以讓您獲得對 HTML 元素的引用並將其綁定到 JavaScript 變量：

1
2
3
4
5
<script>
let myInputField
</script>

<input bind:this={myInputField} />

當您需要在掛載後對元素應用邏輯時，這很方便，例如使用 onMount() 生命周期事件回調。

綁定組件屬性

使用 bind:，您可以將值綁定到組件公開的任何屬性。

假設您有一個 Car.svelte 組件：

1
2
3
4
5
<script>
export let inMovement = false
</script>

<button on:click={() => inMovement = true }>Start car</button>

您可以導入該組件並綁定 inMovement 屬性：

1
2
3
4
5
6
7
8
9
<script>
 import Car from './Car.svelte';

 let carInMovement;
</script>

<Car bind:inMovement={carInMovement} />

{carInMovement}

這可以產生有趣的場景。

tags: [“svelte”, “bindings”, “forms”, “checkboxes”, “radio buttons”, “select fields”]