Binding در Svelte — آموزش Svelte (بخش چهارم)

با استفاده از Svelte می‌توانیم اتصال‌های دوطرفه‌ای بین داده‌ها و UI ایجاد کنیم. فریمورک‌های وب دیگر زیادی می‌توانند اتصال‌های دوطرفه‌ای را ایجاد کنند و این یک الگوی رایج است. این موارد به صورت خاص در مورد فرم‌ها مفید است. در این مقاله در مورد Binding در Svelte صحبت خواهیم کرد. برای مطالعه بخش قبلی این مجموعه مطلب آموزشی روی لینک زیر کلیک کنید:

• مدیریت حالت بین کامپوننتی در Svelte — آموزش Svelte (بخش سوم)

bind:value

کار خود را با رایج‌ترین شکل binding که اغلب استفاده می‌شود آغاز می‌کنیم. این اتصال را می‌توان با استفاده از bind:value اعمال کرد. یک متغیر را از حالت کامپوننت برمی‌داریم و آن را به یک فیلد فرم اتصال می‌دهیم:

1<script>
2let name = ''
3</script>
4
5<input bind:value={name}>

اکنون اگر name تغییر یابد، فیلد ورودی مقدار آن را به‌روزرسانی می‌کند. عکس این وضعیت نیز صادق است. اگر فرم به وسیله کاربر به‌روزرسانی شود، متغیر name نیز تغییر می‌یابد. کافی است اطلاع داشته باشید که متغیر باید با استفاده از let/var تعریف شود و نه با const، چون در غیر این صورت نمی‌توان آن را با Svelte به‌روزرسانی کرد، زیرا const یک متغیر با مقداری تعریف می‌کند که نمی‌تواند انتساب مجدد یابد.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

bind:value روی همه flovor-های فیلدهای ورودی مانند "type="number" ،type="email و غیره کار می‌کند، اما در مورد انواع دیگری از فیلدها مانند textarea و select نیز کار می‌کند.

چک‌باکس‌ها و دکمه‌های رادیویی

چک‌باکس‌ها و ورودی‌های رادیویی یعنی عناصر ورودی با مشخصه‌های "type="checkbox یا "type="radio" امکان 3 binding را فراهم می‌سازند:

• bind:checked
• bind:group
• bind:indeterminate

bind:checked امکان اتصال یک مقدار به حالت چک شده عنصر را نیز فراهم می‌سازد:

1<script>
2let isChecked
3</script>
4
5<input type=checkbox bind:checked={isChecked}>

bind:group در مورد ورودی‌های چک‌باکس‌ها و رادیویی مفید است، زیرا این موارد به طور عمده به صورت گروهی استفاده می‌شوند. با استفاده از bind:group می‌توانیم یک آرایه جاوا اسکریپت را به فهرستی از چک‌باکس‌ها ارتباط دهیم و آن را بر مبنای گزینه‌هایی که کاربر انتخاب می‌کند مقداردهی نماییم. به مثال زیر توجه کنید، آرایه goodDogs بر مبنای چک‌باکس‌هایی که تیک می‌زنیم، مقداردهی می‌شوند:

1<script>
2let goodDogs = []
3let dogs = ['Roger', 'Syd']
4</script>
5
6<h2>
7  Who's a good dog?
8</h2>
9
10<ul>
11  {#each dogs as dog}
12    <li>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></li>
13  {/each}
14</ul>
15
16<h2>
17  Good dogs according to me:
18</h2>
19
20<ul>
21  {#each goodDogs as dog}
22    <li>{dog}</li>
23  {/each}
24</ul>

bind:indeterminate امکان اتصال حالت indeterminate یک عنصر را می‌دهد. برای کسب اطلاعات بیشتر به آدرس (+) بروید.

انتخاب فیلدها

bind:value برای فیلد فرم select استفاده می‌شود تا مقدار انتخاب‌شده به صورت خودکار به مقدار متغیر انتساب یابد:

1<script>
2let selected
3</script>
4
5<select bind:value={selected}>
6  <option value="1">1</option>
7  <option value="2">2</option>
8  <option value="3">3</option>
9</select>
10
11{selected}

نکته جالب این است که اگر گزینه‌ها را به صورت خودکار از یک آرایه از اشیا تولید کنید، گزینه انتخاب‌شده اینک یک شیء و نه یک رشته است:

1<script>
2let selected
3
4const goodDogs = [
5  { name: 'Roger' },
6  { name: 'Syd' }
7]
8</script>
9
10<h2>List of possible good dogs:</h2>
11<select bind:value={selected}>
12  {#each goodDogs as goodDog}
13    <option value={goodDog}>{goodDog.name}</option>
14  {/each}
15</select>
16
17{#if selected}
18<h2>
19  Good dog selected: {selected.name}
20</h2>
21{/if}

به مثال زیر (+) توجه کنید. select همچنین امکان خصوصیت multiple را نیز فراهم می‌سازد:

1<script>
2let selected = []
3
4const goodDogs = [
5  { name: 'Roger' },
6  { name: 'Syd' }
7]
8</script>
9
10<h2>List of possible good dogs:</h2>
11<select multiple bind:value={selected}>
12  {#each goodDogs as goodDog}
13    <option value={goodDog}>{goodDog.name}</option>
14  {/each}
15</select>
16
17{#if selected.length}
18<h2>Good dog selected:</h2>
19<ul>
20  {#each selected as dog}
21    <li>{dog.name}</li>
22  {/each}
23</ul>
24{/if}

Binding-های دیگر

بسته به تگ HTML که روی آن کار می‌کنید، می‌توانید انواع مختلفی از Binding را اعمال کنید. bind:files یک اتصال است که روی عناصر ورودی "type="file مجاز است و به وسیله آن به لیستی از فیلدهای انتخاب‌شده اتصال می‌یابد. عنصر details در HTML امکان استفاده از bind:open را برای اتصال مقدار باز/بستن آن فراهم می‌سازد.

تگ‌های audio و video در HTML امکان چندین اتصال را به موارد currentTime ،duration ،paused ،buffered، seekable ،played ،volume و playbackRate فراهم می‌سازند. textContent و innerHTML را می‌توان به فیلدهای contenteditable اتصال داد.

اتصال‌های فقط خواندنی

offsetWidth ،offsetHeight ،clientWidth و clientHeight می‌توانند به صورت فقط خواندنی در هر سطحی از عناصر HTML به جز تگ‌های void مانند br و عناصری که به صورت inline تنظیم می‌شوند، اتصال یابند.

دریافت ارجاعی به عنصر HTML در جاوا اسکریپت

bind:this به عنوان یک نوع خاصی از binding مطرح است که امکان دریافت ارجاعی به یک عنصر HTML و اتصال آن به یک متغیر جاوا اسکریپت را فراهم می‌سازد:

1<script>
2let myInputField
3</script>
4
5<input bind:this={myInputField} />

این وضعیت در مواردی مفید است که بخواهیم منطقی را روی عناصر، پس از mount شدن آن‌ها اعمال کنیم برای نمونه اگر از callback رویداد چرخه عمری ()onMount استفاده کنید، چنین حالتی ممکن است پیش بیاید.

اتصال props کامپوننت‌ها

با استفاده از bind:‎ می‌توان یک مقدار را به هر prop که یک کامپوننت عرضه می‌کند اتصال داد. فرض کنید کامپوننتی به نام Car.svelte دارید:

1<script>
2export let inMovement = false
3</script>
4
5<button on:click={() => inMovement = true }>Start car</button>

می‌توانید کامپوننت را ایمپورت کرده و آن را به prop به نام inMovement اتصال دهید:

1<script>
2  import Car from './Car.svelte';
3
4  let carInMovement;
5</script>
6
7<Car bind:inMovement={carInMovement} />

بدین ترتیب می‌توان کارهای جالبی را در Svelte اجرا کرد. برای مطالعه بخش بعدی این سری مطالب روی لینک زیر کلیک کنید:

• منطق شرطی در Svelte و توضیح promise و رویدادها — آموزش Svelte (بخش پنجم-پایانی)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش جاوا اسکریپت (JavaScript)
• معرفی Svelte و کامپوننت های آن — آموزش Svelte (بخش اول)
• مدیریت حالت در Svelte — آموزش Svelte (بخش دوم)

==