Knockout 이해 및 Knockout을 사용하여 context_javascript 기술을 바인딩하는 방법

녹아웃 소개

ko라고 불리는 Knockout은 MVVM 디자인 패턴(예: Model, view, viewModel)을 사용하여 양방향 바인딩과 실시간 업데이트를 간단하고 우아하게 구현하는 경량 자바스크립트 클래스 라이브러리로, 깔끔한 사용을 도와줍니다. 풍부하고 반응성이 뛰어난 사용자 인터페이스를 만들기 위한 데이터 모델입니다.

Knockout에는 세 가지 핵심 기능이 있습니다.

1. 우아한 종속성 추적: 데이터 모델이 변경될 때마다 해당 UI 부분이 자동으로 업데이트됩니다.

2. 선언적 바인딩: UI를 데이터 모델과 연결하기만 하면 복잡한 동적 UI를 만들 수 있습니다.

3. 간단하게 확장 가능: 선언적 바인딩으로 사용자 정의 동작을 구현하는 데 코드 몇 줄만 있으면 됩니다.

기타 장점:

1. 순수 자바스크립트 코드

2. 언제든지 기존 웹 애플리케이션에 추가할 수 있습니다.

3. GZIP 이후 13K에 불과한 경량

4. 거의 모든 주류 브라우저(IE 6, Firefox 2, Chrome, Safari, Edge 등)에서 작동 가능

ko는 MVVM 디자인 패턴, 즉 모델 뷰 viewModel을 사용합니다.

간단한 예

There are <span data-bind="text: myItems().length"></span> items 

간단합니다. 텍스트 내용을 업데이트하기 위해 코드를 작성할 필요가 없으며 배열 길이가 변경되면 자동으로 업데이트됩니다. 마찬가지로 배열 길이를 사용하여 버튼의 가용성을 제어하려면 필요한 것:

<button data-bind="enable: myItems().length < 5">Add</button>

다음은 Knockout을 사용하여 컨텍스트를 바인딩하는 방법을 소개합니다.

컨텍스트 바인딩

바인딩 컨텍스트는 바인딩에서 참조할 수 있는 데이터를 보유하는 개체입니다. Knockout은 바인딩을 적용할 때 바인딩 컨텍스트에 대한 상속 관계를 자동으로 생성하고 관리합니다. 이 계층 구조의 루트는 사용자가 지정하는 viewModel 매개변수(ko.applyBindings(viewModel))를 참조합니다.

그런 다음 with 또는 foreach와 같은 제어 흐름을 사용하여 중첩된 viewModel 데이터를 참조할 때마다 하위 노드 바인딩 컨텍스트를 생성합니다.

$부모

<h1 data-bind="text: name"></h1>
<div data-bind="with: manager">
 <!-- Now we're inside a nested binding context -->
 <span data-bind="text: name"></span> is the
 manager of <span data-bind="text: $parent.name"></span>
</div> 

$부모님

모든 상위 노드 뷰 모델을 나타내는 배열입니다

$parent[0]: 상위 노드를 나타냅니다.

$parent[1]: 상위 노드를 나타냅니다.

$parent[1]: 증조부 노드를 나타냅니다.

.....등등

$루트

루트 컨텍스트의 루트 노드 뷰 모델 객체로, 일반적으로 $parents[$parents.length - 1]에 해당하는 ko.applyBindings를 통해 지정됩니다.

$컴포넌트

특정 구성요소 템플릿의 컨텍스트에 있는 경우 $comComponent는 해당 구성요소를 지정하며, 지정된 구성요소는 $root와 동일합니다. 중첩된 구성요소의 경우 가장 가까운 구성요소를 나타냅니다.

$데이터

현재 컨텍스트에서 viewModel 개체를 나타내며 $data와 $root는 동일합니다. 중첩된 바인딩 컨텍스트에서 이 매개변수는 현재 데이터 항목으로 설정됩니다.

$data는 예를 들어 viewModel의 속성이 아닌 viewModel 자체를 참조하려는 경우에 매우 유용합니다.

<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
 <li>The value is <span data-bind="text: $data"></span></li>
</ul> 
$index(仅在foreach binding中可用)

foreach 바인딩에 있는 배열의 0 기반 인덱스 항목입니다. 다른 컨텍스트 속성과 달리 $index는 관찰 가능합니다. 즉, 배열 항목이 업데이트될 때 업데이트됩니다.

$parentContext

부모 노드 수준에서 바인딩 컨텍스트 개체를 지정합니다. $parent와의 차이점은 바인딩 컨텍스트가 아닌 부모 노드에 데이터를 지정한다는 것입니다.

$rowData

현재 컨텍스트에서 원래 viewModel의 값입니다. 일반적으로 $data와 동일합니다. 그러나 viewModel을 observable로 수정하면 $data는 관찰 가능하고 $rowData는 관찰 가능합니다.