Аурелия - Связывающее поведение
В этой главе вы узнаете, как использовать behaviors. Вы можете рассматривать поведение привязки как фильтр, который может изменять данные привязки и отображать их в другом формате.
Дроссель
Это поведение используется, чтобы установить, как часто должно происходить обновление привязки. Мы можем использоватьthrottleчтобы замедлить скорость обновления входной модели представления. Рассмотрим пример из предыдущей главы. Ставка по умолчанию200 ms. Мы можем изменить это на2 sec добавлением & throttle:2000 на наш вклад.
app.js
export class App {
constructor() {
this.myData = 'Enter some text!';
}
}
app.html
<template>
<input id = "name" type = "text" value.bind = "myData & throttle:2000" />
<h3>${myData}</h3>
</template>
Debounce
debounce почти то же самое, что throttle. Разница в том, что debounce обновит привязку после того, как пользователь перестанет печатать. В следующем примере будет обновлена привязка, если пользователь перестанет печатать в течение двух секунд.
app.js
export class App {
constructor() {
this.myData = 'Enter some text!';
}
}
app.html
<template>
<input id = "name" type = "text" value.bind = "myData & debounce:2000" />
<h3>${myData}</h3>
</template>
один раз
oneTimeэто наиболее эффективное поведение с точки зрения производительности. Вы должны всегда использовать его, если знаете, что данные должны быть привязаны только один раз.
app.js
export class App {
constructor() {
this.myData = 'Enter some text!';
}
}
app.html
<template>
<input id = "name" type = "text" value.bind = "myData & oneTime" />
<h3>${myData}</h3>
</template>
В приведенном выше примере текст будет привязан к представлению. Однако, если мы изменим текст по умолчанию, ничего не произойдет, поскольку он привязан только один раз.