Ràng buộc mảnh mai

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ếunamethay đổ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,namegiá 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ụnglet/varvà khôngconst, nếu không, nó không thể được cập nhật bởi Svelte, vìconstxác định một biến có giá trị không thể gán lại.

bind:valuehoạ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ưtextareavàselect(thêm vềselectmột lát sau).

Hộp kiểm và nút radio

Hộp kiểm và đầu vào radio (inputcá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:checkedcho 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:grouprấ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:groupbạ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ácgoodDogsmả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:indeterminatecho phép chúng tôi liên kết vớiindeterminatetrạ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:valuecũng hoạt động choselecttrườ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

selectcũng cho phépmultiplethuộ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:fileslà 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ácdetailsPhần tử HTML cho phép sử dụngbind:openđể ràng buộc giá trị mở / đóng của nó.

Cácaudiovàvideothẻ 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.

textContentvàinnerHTMLcó thể bị ràng buộc vàocontenteditablelĩ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,clientHeightcó 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:thislà 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.sveltethà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ếtinMovementchố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