정보실

웹학교

정보실

javascript Svelte에서 바인딩 작업하는 방법

본문

Svelte를 사용하면 데이터와 UI 사이에 양방향 바인딩을 만들 수 있습니다.


다른 많은 웹 프레임 워크는 양방향 바인딩을 제공 할 수 있으며 매우 일반적인 패턴입니다.


특히 양식에 유용합니다.


https://flaviocopes.com/svelte-bindings/ 


bind:value 


bind:value를 사용하여 적용 할 수 있는 가장 일반적인 바인딩 형태부터 시작하겠습니다. 컴포넌트 상태에서 변수를 가져 와서 양식 필드에 바인딩 합니다.

<script>
let name = ''
</script>

<input bind:value={name}>


이제 이름이 변경되면 입력 필드가 해당 값을 업데이트합니다. 그리고 그 반대도 마찬가지입니다. 사용자가 양식을 업데이트하면 이름 변수 값이 변경됩니다.


const는 const가 아닌 let / var을 사용하여 변수를 정의해야 합니다. 그렇지 않으면 const는 재 할당 할 수 없는 값으로 변수를 정의하므로 Svelte에서 업데이트 할 수 없습니다. 


bind : value는 모든 종류의 입력 필드 (type = "number", type = "email"등)에서 작동하지만 textarea 및 select와 같은 다른 종류의 필드에서도 작동합니다 (나중에 선택).


Checkboxes and radio buttons 


확인란과 라디오 입력 (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를 사용하면 요소의 결정되지 않은 상태에 바인딩 할 수 있습니다 (https://css-tricks.com/indeterminate-checkboxes/에 대한 자세한 내용을 보려면


Select fields 


bind:value는 또한 양식 선택 필드에서 작동하여 선택한 값을 변수 값에 자동으로 할당합니다.


<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


Other bindings 


작업중인 HTML 태그에 따라 다른 종류의 바인딩을 적용 할 수 있습니다.

bind : files는 type = "file"입력 요소에 유효한 바인딩이며 선택한 파일 목록을 바인딩 합니다.


세부 사항 HTML 요소를 사용하면 bind : open을 사용하여 열기 / 닫기 값을 바인딩 할 수 있습니다.


오디오 및 비디오 미디어 HTML 태그를 사용하면 currentTime, duration, paused, buffered, seekable, playing, volume, playbackRate와 같은 여러 속성을 바인딩 할 수 있습니다.


textContent 및 innerHTML은 contenteditable 필드에 바인딩 될 수 있습니다.


Read only bindings 


offsetWidth, offsetHeight, clientWidth, clientHeight는 void 태그 (br와 같은) 및 인라인으로 설정된 요소 (디스플레이 : 인라인)를 제외한 모든 블록 레벨 HTML 요소에서 바인드 되고 읽기 전용 일 수 있습니다.


Get a reference to the HTML element in JavaScript 


bind : 이것은 HTML 요소에 대한 참조를 가져 와서 JavaScript 변수에 바인딩 할 수 있는 특별한 종류의 바인딩입니다.

<script>
let myInputField
</script>

<input bind:this={myInputField} />


이는 onMount() 수명주기 이벤트 콜백과 같이 요소를 마운트 한 후 요소에 로직을 적용해야 할 때 매우 유용합니다.


Binding components props 


bind 사용 : 컴포넌트가 노출하는 모든 prop에 값을 바인딩 할 수 있습니다.

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}


이것은 흥미로운 시나리오를 허용 할 수 있습니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 39회 ]  작성일19-10-16 11:26

웹학교