Svelteバインディング

Svelteでバインディングを操作する方法

Svelteを使用すると、データとUIの間に双方向のバインディングを作成できます。

他の多くのWebフレームワークは、双方向のバインディングを提供できます。これは非常に一般的なパターンです。

これらはフォームで特に役立ちます。

bind：value

よく使用する最も一般的なバインディングの形式から始めましょう。これは、bind:value。コンポーネントの状態から変数を取得し、それをフォームフィールドにバインドします。

<script>
let name = ''
</script>
<input bind:value={name}>

今ならname入力フィールドを変更すると、その値が更新されます。また、その逆も当てはまります。ユーザーがフォームを更新した場合、name変数値が変更されます。

変数はを使用して定義する必要があることに注意してくださいlet/varではなくconst、それ以外の場合は、Svelteで更新できません。const再割り当てできない値を持つ変数を定義します。

bind:value入力フィールドのすべてのフレーバーで機能します（type="number"、type="email"など）ですが、他の種類のフィールドでも機能します。textareaそしてselect（詳細select後で）。

チェックボックスとラジオボタン

チェックボックスと無線入力（inputを持つ要素type="checkbox"またはtype="radio"）次の3つのバインディングを許可します。

bind:checked
bind:group
bind:indeterminate

bind:checked要素のチェックされた状態に値をバインドできます。

<script>
let isChecked
</script>
<input type=checkbox bind:checked={isChecked}>

bind:groupチェックボックスとラジオ入力はグループで非常に頻繁に使用されるため、これらは便利です。使用するbind:groupJavaScript配列をチェックボックスのリストに関連付けて、ユーザーの選択に基づいてデータを入力することができます。

これが例です。ザ・goodDogs配列は、チェックボックスに基づいて入力されます。

<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>

上の例を参照してくださいhttps://svelte.dev/repl/059c1b5edffc4b058ad36301dd7a1a58

bind:indeterminateにバインドすることができますindeterminate要素の状態（詳細を知りたい場合はhttps://css-tricks.com/indeterminate-checkboxes/）

フィールドを選択

bind:valueのためにも動作しますselect選択した値を変数の値に自動的に割り当てるためのフォームフィールド：

<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}

すばらしいのは、オブジェクトの配列から動的にオプションを生成すると、選択されたオプションが文字列ではなくオブジェクトになることです。

<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}

例を参照してください。https://svelte.dev/repl/7e06f9b7becd4c57880db5ed184ea0f3

selectまた、multiple属性：

<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}

例を参照してください。https://svelte.dev/repl/b003248e87f04919a2f9fed63dbdab8c

その他のバインディング

作業しているHTMLタグに応じて、さまざまな種類のバインディングを適用できます。

bind:filesで有効なバインディングですtype="file"選択したファイルのリストをバインドするための入力要素。

ザ・detailsHTML要素を使用するとbind:openそのオープン/クローズ値をバインドします。

ザ・audioそしてvideoメディアHTMLタグを使用すると、それらのプロパティのいくつかをバインドできます。currentTime、duration、paused、buffered、seekable、played、volume、playbackRate。

textContentそしてinnerHTMLバインドすることができますcontenteditable田畑。

これらの特定のHTML要素に非常に役立つすべてのもの。

読み取り専用バインディング

offsetWidth、offsetHeight、clientWidth、clientHeightバインドすることができます読み取り専用voidタグを除く任意のブロックレベルのHTML要素（br）およびインラインに設定されている要素（display: inline）。

JavaScriptでHTML要素への参照を取得します

bind:thisは、HTML要素への参照を取得し、それをJavaScript変数にバインドできる特別な種類のバインディングです。

<script>
let myInputField
</script>
<input bind:this={myInputField} />

これは、要素をマウントした後に要素にロジックを適用する必要がある場合に便利です。たとえば、onMount()ライフサイクルイベントコールバック。

コンポーネントの小道具をバインドする

使用するbind:コンポーネントが公開する任意の小道具に値をバインドできます。

あなたが持っていると言うCar.svelte成分：

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

コンポーネントをインポートしてバインドできますinMovement小道具：

<script>
  import Car from './Car.svelte';
let carInMovement;
</script>
<Car bind:inMovement={carInMovement} />
{carInMovement}

これにより、興味深いシナリオが可能になります。

私の無料ダウンロードSvelteハンドブック