苗条的绑定

如何在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}

这可以考虑一些有趣的情况。

免费下载我的苗条手册


更多精妙的教程: