苗條的綁定

如何在Svelte中使用綁定

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

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

它們對於表格特別有用。

綁定:值

讓我們從最常用的綁定形式開始,您可以使用bind:value。您從組件狀態獲取變量,並將其綁定到表單字段:

<script>
let name = ''
</script>

<input bind:value={name}>

現在如果name更改輸入字段將更新其值。反之亦然:如果表單是由用戶更新的,則name變量值更改。

請注意,必須使用let/var並不是const,否則Svelte無法對其進行更新,因為const定義一個變量,其值不能重新分配。

bind:value適用於所有類型的輸入字段(type="number"type="email"等等),但它也適用於其他類型的字段,例如textareaselect(更多關於select之後)。

複選框和單選按鈕

複選框和廣播輸入(input元素與type="checkbox"或者type="radio")允許以下3種綁定:

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

bind:checked允許我們將值綁定到元素的檢查狀態:

<script>
let isChecked
</script>

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

bind:group複選框和無線電輸入非常方便,因為它們經常成組使用。使用bind:group您可以將JavaScript數組與復選框列表相關聯,並根據用戶的選擇進行填充。

這是一個例子。這goodDogs數組根據我打勾的複選框進行填充:

<script>
let goodDogs = []
let dogs = ['Roger', 'Syd']
</script>

<h2> Who’s a good dog? </h2>

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

<h2> Good dogs according to me: </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表單字段以獲取將所選值自動分配給變量的值:

<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}

很棒的事情是,如果您從對像數組動態生成選項,那麼所選選項現在是一個對象,而不是字符串:

<script>
let selected

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

<h2>List of possible good dogs:</h2> <select bind:value={selected}> {#each goodDogs as goodDog} <option value={goodDog}>{goodDog.name}</option> {/each} </select>

{#if selected} <h2> Good dog selected: {selected.name} </h2> {/if}

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

select也允許multiple屬性:

<script>
let selected = []

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

<h2>List of possible good dogs:</h2> <select multiple bind:value={selected}> {#each goodDogs as goodDog} <option value={goodDog}>{goodDog.name}</option> {/each} </select>

{#if selected.length} <h2>Good dog selected:</h2> <ul> {#each selected as dog} <li>{dog.name}</li> {/each} </ul> {/if}

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

其他綁定

根據您正在處理的HTML標記,您可以應用不同種類的綁定。

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

detailsHTML元素允許使用bind:open綁定其開/關值。

audiovideo媒體HTML標記允許您綁定它們的幾個屬性:currentTimedurationpausedbufferedseekableplayedvolumeplaybackRate

textContentinnerHTML可以綁定contenteditable領域。

對於那些特定的HTML元素,所有內容都非常有用。

只讀綁定

offsetWidthoffsetHeightclientWidthclientHeight可以綁定只讀在任何塊級HTML元素上,不包括空標記(例如br)和設置為內聯的元素(display: inline)。

獲取對JavaScript中HTML元素的引用

bind:this是一種特殊的綁定,它允許您獲取對HTML元素的引用並將其綁定到JavaScript變量:

<script>
let myInputField
</script>

<input bind:this={myInputField} />

當您在安裝元素後需要對元素應用邏輯時(例如,使用onMount()生命週期事件回調。

裝訂道具

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

說你有一個Car.svelte成分:

<script>
export let inMovement = false
</script>

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

您可以導入組件並綁定inMovement支柱:

<script>
  import Car from './Car.svelte';

let carInMovement; </script>

<Car bind:inMovement={carInMovement} />

{carInMovement}

這可以考慮一些有趣的情況。

免費下載我的苗條手冊


更多精妙的教程: