本文共 5423 字,大约阅读时间需要 18 分钟。
苗条的生成树
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.
它们对于表格特别有用。
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
来应用它。 您从组件状态获取变量,并将其绑定到表单字段:
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 notconst
, otherwise it can’t be updated by Svelte, asconst
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 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
允许我们将值绑定到元素的检查状态:
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
数组根据我打勾的复选框进行填充:
Who's a good dog?
See the example on
参见上的示例
bind:indeterminate
allows us to bind to the indeterminate
state of an element (if you want to learn more head to )
bind:indeterminate
允许我们绑定到元素的indeterminate
状态(如果您想了解更多信息, 转至 )
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
表单字段,以获取自动分配给变量值的选定值:
{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:
很棒的事情是,如果您从对象数组动态生成选项,则所选选项现在是对象而不是字符串:
List of possible good dogs:
{#if selected}Good dog selected: {selected.name}
{/if}
See example:
参见示例: :
select
also allows the multiple
attribute:
select
还允许使用multiple
属性:
List of possible good dogs:
{#if selected.length}Good dog selected:
See example:
查看范例: :
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元素,所有内容都非常有用。
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
)。
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变量:
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()
,这非常方便。
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
组件:
You can import the component and bind the inMovement
prop:
您可以导入组件并绑定inMovement
:
{carInMovement}
This can allow for interesting scenarios.
这可以考虑一些有趣的情况。
翻译自:
苗条的生成树
转载地址:http://qwqgb.baihongyu.com/