Aurelia - Hành vi ràng buộc
Trong chương này, bạn sẽ học cách sử dụng behaviors. Bạn có thể coi hành vi ràng buộc như một bộ lọc có thể thay đổi dữ liệu ràng buộc và hiển thị nó ở một định dạng khác.
Bướm ga
Hành vi này được sử dụng để đặt tần suất một số cập nhật ràng buộc sẽ diễn ra. Chúng ta có thể sử dụngthrottleđể làm chậm tốc độ cập nhật mô hình xem đầu vào. Hãy xem xét ví dụ từ chương cuối cùng. Tỷ lệ mặc định là200 ms. Chúng tôi có thể thay đổi điều đó thành2 sec bằng cách thêm & throttle:2000 vào đầu vào của chúng tôi.
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 gần giống như throttle. Sự khác biệt là, debounce sẽ cập nhật ràng buộc sau khi người dùng ngừng nhập. Ví dụ sau sẽ cập nhật liên kết nếu người dùng ngừng nhập trong hai giây.
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>
một lần
oneTimelà cách thực hiện hành vi hiệu quả nhất khôn ngoan. Bạn nên luôn sử dụng nó khi bạn biết rằng dữ liệu chỉ nên được ràng buộc một lần.
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>
Ví dụ trên sẽ liên kết văn bản với dạng xem. Tuy nhiên, nếu chúng ta thay đổi văn bản mặc định, sẽ không có gì xảy ra vì nó chỉ bị ràng buộc một lần.