KnockoutJS-선언적 바인딩

KnockoutJS의 선언적 바인딩은 데이터를 UI에 연결하는 강력한 방법을 제공합니다.

바인딩과 Observable 간의 관계를 이해하는 것이 중요합니다. 기술적으로이 두 가지는 다릅니다. 일반 JavaScript 객체를 ViewModel로 사용할 수 있으며 KnockoutJS는 View의 바인딩을 올바르게 처리 할 수 있습니다.

Observable이 없으면 UI의 속성이 처음으로 만 처리됩니다. 이 경우 기본 데이터 업데이트에 따라 자동으로 업데이트 할 수 없습니다. 이를 위해 바인딩은 Observable 속성을 참조해야합니다.

바인딩 구문

바인딩은 두 항목으로 구성됩니다. name 과 value. 다음은 간단한 예입니다.

Today is : <span data-bind = "text: whatDay"></span>

여기서 text는 바인딩 이름이고 whatDay는 바인딩 값입니다. 다음 구문에 표시된대로 쉼표로 구분 된 여러 바인딩을 가질 수 있습니다.

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

여기서 각 키를 누르면 값이 업데이트됩니다.

바인딩 값

바인딩 값은 single value, literal, ㅏ variable 또는 JavaScript표현. 바인딩이 잘못된 표현식 또는 참조를 참조하는 경우 KO는 오류를 생성하고 바인딩 처리를 중지합니다.

다음은 바인딩의 몇 가지 예입니다.

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

다음 사항에 유의하십시오-

공백은 아무런 차이가 없습니다.
KO 3.0부터는 바인딩에 정의되지 않은 값을 제공하는 바인딩 값을 건너 뛸 수 있습니다.

바인딩 컨텍스트

현재 바인딩에서 사용중인 데이터는 개체에서 참조 할 수 있습니다. 이 개체는binding context.

컨텍스트 계층은 KnockoutJS에 의해 자동으로 생성되고 관리됩니다. 다음 표에는 KO에서 제공하는 다양한 유형의 바인딩 컨텍스트가 나열되어 있습니다.

Sr. 아니.	바인딩 컨텍스트 유형 및 설명
1	$root 이것은 항상 최상위 ViewModel을 참조합니다. 이를 통해 ViewModel을 조작하기위한 최상위 메서드에 액세스 할 수 있습니다. 이것은 일반적으로 ko.applyBindings에 전달되는 객체입니다.
2	$data 이 속성은 thisJavascript 객체의 키워드. 바인딩 컨텍스트의 $ data 속성은 현재 컨텍스트에 대한 ViewModel 개체를 참조합니다.
삼	$index 이 속성은 foreach 루프 내부 배열의 현재 항목 인덱스를 포함합니다. $ index의 값은 기본 Observable 배열이 업데이트 될 때 자동으로 변경됩니다. 분명히이 컨텍스트는foreach 바인딩.
4	$parent 이 속성은 부모 ViewModel 개체를 참조합니다. 이것은 중첩 루프 내부에서 외부 ViewModel 속성에 액세스하려는 경우에 유용합니다.
5	$parentContext 부모 수준에서 바인딩 된 컨텍스트 개체가 호출됩니다. $parentContext. 이것은$parent. $ parent는 데이터를 나타냅니다. 반면 $ parentContext 는 바인딩 컨텍스트를 나타냅니다. 예를 들어 내부 컨텍스트에서 외부 foreach 항목의 인덱스에 액세스해야 할 수 있습니다.
6	$rawdata 이 컨텍스트는 현재 상황에서 원시 ViewModel 값을 보유합니다. 이것은 $ data와 비슷하지만 ViewModel이 Observable로 래핑되면 $ data가 그냥 언 래핑된다는 점이 다릅니다. ViewModel 및 $ rawdata는 실제 Observable 데이터가됩니다.
7	$component 이 컨텍스트는 특정 구성 요소 내부에있을 때 해당 구성 요소의 ViewModel을 참조하는 데 사용됩니다. 예를 들어 컴포넌트의 템플릿 섹션에있는 현재 데이터 대신 ViewModel에서 일부 속성에 액세스 할 수 있습니다.
8	$componentTemplateNodes 이것은 특정 구성 요소 템플릿 내에있을 때 특정 구성 요소에 전달 된 DOM 노드의 배열을 나타냅니다.

다음 용어는 바인딩에서도 사용할 수 있지만 실제로 바인딩 컨텍스트는 아닙니다.

$context − 이것은 기존의 바인딩 컨텍스트 객체 일뿐입니다.
$element −이 개체는 현재 바인딩에서 DOM의 요소를 참조합니다.

텍스트 및 표현 작업

다음은 텍스트 및 시각적 모양을 처리하기 위해 KO에서 제공하는 바인딩 유형 목록입니다.

Sr. 아니.	바인딩 유형 및 용도
1	보이는 : <제본 조건> 특정 조건에 따라 HTML DOM 요소를 표시하거나 숨 깁니다.
2	텍스트 : <바인딩 값> HTML DOM 요소의 내용을 설정합니다.
삼	html : <바인딩 값> DOM 요소의 HTML 마크 업 내용을 설정합니다.
4	css : <바인딩 객체> 요소에 CSS 클래스를 적용합니다.
5	스타일 : 요소의 인라인 스타일 속성을 정의합니다.
6	속성 : <바인딩 개체> 요소에 동적으로 속성을 추가합니다.

제어 흐름 바인딩 작업

다음은 KO에서 제공하는 제어 흐름 바인딩 유형 목록입니다.

Sr. 아니.	바인딩 유형 및 용도
1	foreach : <바인딩 배열> 이 바인딩에서 각 배열 항목은 루프의 HTML 마크 업에서 참조됩니다.
2	if : <제본 조건> 조건이 참이면 주어진 HTML 마크 업이 처리됩니다. 그렇지 않으면 DOM에서 제거됩니다.
삼	ifnot : <제본 조건> If의 부정. 조건이 참이면 주어진 HTML 마크 업이 처리됩니다. 그렇지 않으면 DOM에서 제거됩니다.
4	with : 이 바인딩은 지정된 개체의 컨텍스트에서 개체의 자식 요소를 바인딩하는 데 사용됩니다.
5	구성 요소 : <구성 요소 이름> 또는 구성 요소 : <구성 요소 개체> 이 바인딩은 구성 요소를 DOM 요소에 삽입하고 선택적으로 매개 변수를 전달하는 데 사용됩니다.

양식 필드 바인딩 작업

다음은 KO에서 제공하는 Form Fields Binding 유형 목록입니다.

Sr. 아니.	바인딩 유형 및 용도
1	클릭 : <바인딩 기능> 이 바인딩은 클릭을 기반으로 DOM 요소와 연관된 JavaScript 함수를 호출하는 데 사용됩니다.
2	이벤트 : 이 바인딩은 지정된 DOM 이벤트를 수신하고이를 기반으로 연관된 핸들러 함수를 호출하는 데 사용됩니다.
삼	제출 : <바인딩 기능> 이 바인딩은 연관된 DOM 요소가 제출 될 때 JavaScript 함수를 호출하는 데 사용됩니다.
4	활성화 : <바인딩 값> 이 바인딩은 지정된 조건에 따라 특정 DOM 요소를 활성화하는 데 사용됩니다.
5	비활성화 : <바인딩 값> 이 바인딩은 매개 변수가 true로 평가 될 때 연관된 DOM 요소를 비활성화합니다.
6	값 : <바인딩 값> 이 바인딩은 각 DOM 요소의 값을 ViewModel 속성에 연결하는 데 사용됩니다.
7	textInput : <바인딩 값> 이 바인딩은 텍스트 상자 또는 텍스트 영역과 ViewModel 속성 간의 양방향 바인딩을 만드는 데 사용됩니다.
8	hasFocus : <바인딩 값> 이 바인딩은 ViewModel 속성을 통해 HTML DOM 요소의 포커스를 수동으로 설정하는 데 사용됩니다.
9	확인 됨 : 이 바인딩은 확인 가능한 양식 요소와 ViewModel 속성 간의 링크를 만드는 데 사용됩니다.
10	옵션 : 이 바인딩은 선택 요소에 대한 옵션을 정의하는 데 사용됩니다.
11	selectedOptions : <바인딩 배열> 이 바인딩은 다중 목록 선택 양식 제어에서 현재 선택된 요소로 작업하는 데 사용됩니다.
12	uniqueName : <바인딩 값> 이 바인딩은 DOM 요소의 고유 한 이름을 생성하는 데 사용됩니다.