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:group
JavaScript配列をチェックボックスのリストに関連付けて、ユーザーの選択に基づいてデータを入力することができます。
これが例です。ザ・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"
選択したファイルのリストをバインドするための入力要素。
ザ・details
HTML要素を使用すると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ハンドブック
より洗練されたチュートリアル:
- Svelte入門-短いチュートリアル
- Svelteで小道具を操作する方法
- Svelteにコンポーネントをインポートする方法
- Svelteコンポーネントから関数と変数をエクスポートする方法
- Svelteテンプレート:条件付きロジック
- Svelteコンポーネントをオンデマンドで再レンダリングする方法
- Svelteスロット
- Svelteテンプレートにコメントを追加する方法
- Svelteバインディング
- Svelteでの状態更新の処理
- Svelteのリアクティブステートメント
- Svelteライフサイクルイベント
- Svelteテンプレート:ループ
- SvelteテンプレートでPromiseを解決する
- Svelteでのイベントの操作
- Svelteのクロスコンポーネント状態管理
- スクリプトモジュールの外部でSapperのURLパラメータにアクセスする方法
- SvelteでCSSを動的に適用する方法
- SapperでURLにリダイレクトする方法
- Svelteテンプレートでforループをシミュレートする方法