苗条的生成树_苗条的绑定

苗条的生成树

Using Svelte you can create a two-way binding between data and the UI.

使用Svelte，您可以在数据和UI之间创建双向绑定。

Many other Web frameworks can provide two-way bindings, it’s a very common pattern.

许多其他Web框架可以提供双向绑定，这是一种非常常见的模式。

They are especially useful with forms.

它们对于表格特别有用。

绑定：值 (bind:value)

Let’s start with the most common form of binding you’ll often use, which you can apply using bind:value. You take a variable from the component state, and you bind it to a form field:

让我们从最常用的绑定形式开始，您可以使用bind:value来应用它。 您从组件状态获取变量，并将其绑定到表单字段：

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

<input bind:value={name}>

Now if name changes the input field will update its value. And the opposite is true, as well: if the form is updated by the user, the name variable value changes.

现在，如果name更改，则输入字段将更新其值。 反之亦然：如果表单由用户更新，则name变量值会更改。

Just be aware that the variable must be defined using let/var and not const, otherwise it can’t be updated by Svelte, as const defines a variable with a value that can’t be reassigned.

请注意，该变量必须使用let/var而不是const进行定义，否则Svelte无法对其进行更新，因为const定义了一个变量，其值无法重新分配。

bind:value works on all flavors of input fields (type="number", type="email" and so on), but it also works for other kind of fields, like textarea and select (more on select later).

bind:value输入字段(所有口味的作品type="number" ， type="email"等)，但它也适用于其他类型的字段，如textarea和select (更多select更高版本)。

复选框和单选按钮 (Checkboxes and radio buttons)

Checkboxes and radio inputs (input elements with type="checkbox" or type="radio") allow these 3 bindings:

复选框和单选输入(具有type="checkbox"或type="radio" input元素)允许以下3种绑定：

• bind:checked

  bind:checked

• bind:group

  bind:group

• bind:indeterminate

  bind:indeterminate

bind:checked allows us to bind a value to the checked state of the element:

bind:checked允许我们将值绑定到元素的检查状态：

<script>
let isChecked
</script>

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

bind:group is handy with checkboxes and radio inputs because those are very often used in groups. Using bind:group you can associate a JavaScript array to a list of checkboxes and have it populated based on the choices made by the user.

bind:group便于使用复选框和单选输入，因为它们经常在组中使用。 使用bind:group可以将JavaScript数组与复选框列表关联，并根据用户的选择进行填充。

Here’s an example. The goodDogs array populates based on the checkboxes I tick:

这是一个例子。 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>

See the example on https://svelte.dev/repl/059c1b5edffc4b058ad36301dd7a1a58

参见https://svelte.dev/repl/059c1b5edffc4b058ad36301dd7a1a58上的示例

bind:indeterminate allows us to bind to the indeterminate state of an element (if you want to learn more head to https://css-tricks.com/indeterminate-checkboxes/)

bind:indeterminate允许我们绑定到元素的indeterminate状态(如果您想了解更多信息， 请转至https://css-tricks.com/indeterminate-checkboxes/ )

选择栏位 (Select fields)

bind:value also works for the select form field to get the selected value automatically assigned to the value of a variable:

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}

The cool thing is that if you generate options dynamically from an array of objects, the selected option is now an object not a string:

很棒的事情是，如果您从对象数组动态生成选项，则所选选项现在是对象而不是字符串：

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

See example: https://svelte.dev/repl/7e06f9b7becd4c57880db5ed184ea0f3

参见示例： https : //svelte.dev/repl/7e06f9b7becd4c57880db5ed184ea0f3

select also allows the multiple attribute:

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}

See example: https://svelte.dev/repl/b003248e87f04919a2f9fed63dbdab8c

查看范例： https ： //svelte.dev/repl/b003248e87f04919a2f9fed63dbdab8c

其他绑定 (Other bindings)

Depending on the HTML tag you are working on, you can apply different kinds of bindings.

根据您正在处理HTML标记，您可以应用不同种类的绑定。

bind:files is a binding valid on type="file" input elements to bind the list of selected files.

bind:files是对type="file"输入元素有效的绑定，用于绑定所选文件的列表。

The details HTML element allows the use of bind:open to bind its open/close value.

details HTML元素允许使用bind:open绑定其打开/关闭值。

The audio and video media HTML tags allow you to bind several of their properties: currentTime, duration, paused, buffered, seekable, played, volume, playbackRate.

audio和video媒体HTML标记允许您绑定它们的几个属性： currentTime ， duration ， duration ， paused ， buffered ， seekable ， played ， volume ， playbackRate 。

textContent and innerHTML can be bound on contenteditable fields.

textContent和innerHTML可以绑定在contenteditable字段上。

All things very useful for those specific HTML elements.

对于那些特定HTML元素，所有内容都非常有用。

只读绑定 (Read-only bindings)

offsetWidth, offsetHeight, clientWidth, clientHeight can be bound read only on any block level HTML element, excluding void tags (like br) and elements that are set to be inline (display: inline).

offsetWidth ， offsetHeight ， clientWidth ， clientHeight 只能在任何块级HTML元素上绑定为只读 ，不包括void标签(如br )和设置为inline的元素( display: inline )。

获取对JavaScript中HTML元素的引用 (Get a reference to the HTML element in JavaScript)

bind:this is a special kind of binding that allows you to get a reference to an HTML element and bind it to a JavaScript variable:

bind:this是一种特殊的绑定，它允许您获取对HTML元素的引用并将其绑定到JavaScript变量：

<script>
let myInputField
</script>

<input bind:this={myInputField} />

This is handy when you need to apply logic to elements after you mount them, for example, using the onMount() lifecycle event callback.

当您在安装元素后需要将逻辑应用于元素时(例如，使用onMount()生命周期事件回调onMount() ，这非常方便。

装订道具 (Binding components props)

Using bind: you can bind a value to any prop that a component exposes.

使用bind:您可以将值绑定到组件公开的任何prop。

Say you have a Car.svelte component:

假设您有一个Car.svelte组件：

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

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

You can import the component and bind the inMovement prop:

您可以导入组件并绑定inMovement ：

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

  let carInMovement;
</script>

<Car bind:inMovement={carInMovement} />

{carInMovement}

This can allow for interesting scenarios.

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

翻译自: https://flaviocopes.com/svelte-bindings/

苗条的生成树