Cách làm việc với các ràng buộc trong Svelte
Sử dụng Svelte, bạn có thể tạo ràng buộc hai chiều giữa dữ liệu và giao diện người dùng.
Nhiều khung công tác Web khác có thể cung cấp các ràng buộc hai chiều, đó là một mẫu rất phổ biến.
Chúng đặc biệt hữu ích với các biểu mẫu.
ràng buộc: giá trị
Hãy bắt đầu với hình thức ràng buộc phổ biến nhất mà bạn thường sử dụng, bạn có thể áp dụng bằng cách sử dụngbind:value
. Bạn lấy một biến từ trạng thái thành phần và bạn liên kết nó với một trường biểu mẫu:
<script>
let name = ''
</script>
<input bind:value={name}>
Bây giờ nếuname
thay đổi trường đầu vào sẽ cập nhật giá trị của nó. Và điều ngược lại cũng đúng: nếu biểu mẫu được cập nhật bởi người dùng,name
giá trị biến đổi thay đổi.
Chỉ cần lưu ý rằng biến phải được xác định bằng cách sử dụng
let/var
và khôngconst
, nếu không, nó không thể được cập nhật bởi Svelte, vìconst
xác định một biến có giá trị không thể gán lại.
bind:value
hoạt động trên tất cả các phiên bản của các trường đầu vào (type="number"
,type="email"
và v.v.), nhưng nó cũng hoạt động cho các loại trường khác, nhưtextarea
vàselect
(thêm vềselect
một lát sau).
Hộp kiểm và nút radio
Hộp kiểm và đầu vào radio (input
các yếu tố vớitype="checkbox"
hoặc làtype="radio"
) cho phép 3 ràng buộc sau:
bind:checked
bind:group
bind:indeterminate
bind:checked
cho phép chúng tôi liên kết một giá trị với trạng thái đã kiểm tra của phần tử:
<script>
let isChecked
</script>
<input type=checkbox bind:checked={isChecked}>
bind:group
rất hữu ích với các hộp kiểm và đầu vào radio vì chúng thường được sử dụng theo nhóm. Sử dụngbind:group
bạn có thể liên kết một mảng JavaScript với một danh sách các hộp kiểm và điền vào nó dựa trên các lựa chọn của người dùng.
Đây là một ví dụ. CácgoodDogs
mảng điền dựa trên các hộp kiểm tôi đánh dấu:
<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>
Xem ví dụ trênhttps://svelte.dev/repl/059c1b5edffc4b058ad36301dd7a1a58
bind:indeterminate
cho phép chúng tôi liên kết vớiindeterminate
trạng thái của một phần tử (nếu bạn muốn tìm hiểu thêm, hãy đếnhttps://css-tricks.com/indetermina-checkboxes/)
Chọn các lĩnh vực
bind:value
cũng hoạt động choselect
trường biểu mẫu để nhận giá trị đã chọn tự động được gán cho giá trị của một biến:
<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}
Điều thú vị là nếu bạn tạo các tùy chọn động từ một mảng đối tượng, tùy chọn đã chọn bây giờ là một đối tượng không phải là một chuỗi:
<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}
Xem ví dụ:https://svelte.dev/repl/7e06f9b7becd4c57880db5ed184ea0f3
select
cũng cho phépmultiple
thuộc tính:
<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}
Xem ví dụ:https://svelte.dev/repl/b003248e87f04919a2f9fed63dbdab8c
Các ràng buộc khác
Tùy thuộc vào thẻ HTML mà bạn đang làm việc, bạn có thể áp dụng các loại liên kết khác nhau.
bind:files
là một ràng buộc hợp lệ trêntype="file"
các yếu tố đầu vào để liên kết danh sách các tệp đã chọn.
Cácdetails
Phần tử HTML cho phép sử dụngbind:open
để ràng buộc giá trị mở / đóng của nó.
Cácaudio
vàvideo
thẻ HTML media cho phép bạn liên kết một số thuộc tính của chúng:currentTime
,duration
,paused
,buffered
,seekable
,played
,volume
,playbackRate
.
textContent
vàinnerHTML
có thể bị ràng buộc vàocontenteditable
lĩnh vực.
Tất cả những thứ rất hữu ích cho các phần tử HTML cụ thể đó.
Ràng buộc chỉ đọc
offsetWidth
,offsetHeight
,clientWidth
,clientHeight
có thể bị ràng buộcchỉ đọctrên bất kỳ phần tử HTML cấp khối nào, ngoại trừ các thẻ void (nhưbr
) và các phần tử được đặt thành nội dòng (display: inline
).
Nhận tham chiếu đến phần tử HTML trong JavaScript
bind:this
là một loại liên kết đặc biệt cho phép bạn nhận tham chiếu đến một phần tử HTML và liên kết nó với một biến JavaScript:
<script>
let myInputField
</script>
<input bind:this={myInputField} />
Điều này rất hữu ích khi bạn cần áp dụng logic cho các phần tử sau khi bạn gắn kết chúng, ví dụ: sử dụngonMount()
gọi lại sự kiện vòng đời.
Đạo cụ thành phần ràng buộc
Sử dụngbind:
bạn có thể liên kết một giá trị với bất kỳ đề xuất nào mà một thành phần hiển thị.
Nói rằng bạn có mộtCar.svelte
thành phần:
<script>
export let inMovement = false
</script>
<button on:click={() => inMovement = true }>Start car</button>
Bạn có thể nhập thành phần và liên kếtinMovement
chống đỡ:
<script>
import Car from './Car.svelte';
let carInMovement;
</script>
<Car bind:inMovement={carInMovement} />
{carInMovement}
Điều này có thể cho phép các kịch bản thú vị.
Tải xuống miễn phí của tôiSổ tay Svelte
Các hướng dẫn nhỏ gọn hơn:
- Bắt đầu với Svelte - một hướng dẫn ngắn
- Cách làm việc với các đạo cụ trong Svelte
- Cách nhập các thành phần trong Svelte
- Cách xuất các hàm và biến từ một thành phần Svelte
- Mẫu Svelte: logic có điều kiện
- Cách kết xuất một thành phần Svelte theo yêu cầu
- Slotte Slots
- Cách thêm nhận xét trong các mẫu Svelte
- Ràng buộc mảnh mai
- Xử lý cập nhật trạng thái trong Svelte
- Câu lệnh phản ứng trong Svelte
- Sự kiện vòng đời của Svelte
- Svelte mẫu: vòng lặp
- Giải quyết lời hứa trong các mẫu Svelte
- Làm việc với các sự kiện trong Svelte
- Quản lý nhà nước nhiều thành phần trong Svelte
- Cách truy cập tham số URL trong Sapper bên ngoài mô-đun tập lệnh
- Cách áp dụng động CSS trong Svelte
- Cách chuyển hướng đến một URL trong Sapper
- Cách mô phỏng vòng lặp for trong các mẫu Svelte