KnockoutJ에서 Observable이 작동하는 방식

이 콘텐츠는 기본적으로 원본 자료를 번역한 것입니다. Magento 2용 KnockoutJ에 대해 배우고 KnockouJ에 대한 포르투갈어 콘텐츠를 제작하려는 의도입니다.

선적 서류 비치

• KnockoutJs: Observable
• KnockoutJs: 관찰 가능 배열
• KnockoutJs: 계산된 관찰 가능 항목
• KnockoutJs: 쓰기 가능한 계산된 Observable
• KnockoutJs: 순수 계산 관측 가능 항목
• KnockoutJs: 계산된 관찰 가능 항목

---

관찰 가능 항목

KnockoutJs는 값이 변경될 때 모니터링하고 자동으로 업데이트할 수 있는 속성인 observable 개념을 도입합니다. 이 기능을 사용하면 사용자 인터페이스가 모델.

데이터의 변경 사항에 동적으로 반응할 수 있습니다.

KnockoutJs에서 Observable을 생성하려면 ko.observable() 함수를 사용하고 여기에 초기값을 할당할 수 있습니다. observable의 현재 값에 액세스하려면 이를 함수로 처리하면 됩니다. 초기 값 없이 무언가를 관찰하려면 매개 변수 없이 Observable 속성을 ​​호출하면 됩니다.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

• ko.isObservable: observables, observables 배열 및 모든 계산된 Observables
에 대해 true를 반환합니다.
• ko.isWritableObservable: observable, observable 배열 및 writable 계산된 observable에 대해 true를 반환합니다.

구독

observable의 구독은 observable의 값이 변경될 때마다 알림을 받을 수 있는 메커니즘입니다. 이는 observable의 변경 사항을 추적하고 이러한 변경 사항에 대응하고, 사용자 인터페이스를 업데이트하거나 필요한 경우 다른 조치를 취하는 데 필수적입니다.

subscribe() 메소드 ***는 observable의 값이 수정될 때마다 실행되는 *콜백 함수를 수신합니다. 콜백 함수는 observable의 새 값을 인수로 받습니다. 이 함수는 세 가지 매개변수를 받습니다. callback은 알림이 발생할 때마다 호출되는 함수이고, target(선택 사항)은 callback 함수에서 이 값을 정의합니다. event (선택사항, 기본값은 변경)은 알림을 받을 이벤트의 이름입니다.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

1. 변경: 이는 observable 값이 변경될 때마다 구독을 트리거하는 기본 이벤트입니다. 가장 일반적인 이벤트이며 다른 이벤트가 명시적으로 지정되지 않은 경우에 사용됩니다.
2. beforeChange: 이 이벤트는 observable의 값이 변경되기 전에 시작됩니다. 콜백 함수는 observable의 현재 값과 observable에 할당될 제안된(새) 값이라는 두 가지 인수를 받습니다. 이를 통해 현재 값이 변경되기 전에 이를 기반으로 작업을 수행할 수 있습니다.
3. afterChange: 이 이벤트는 Observable의 값이 변경된 후에 트리거됩니다. 콜백 함수는 Observable의 이전 값(변경 전)과 Observable에 할당된 새 값이라는 두 가지 인수를 받습니다. 특정 변경 사항이 발생한 후 이에 대응해야 할 때 유용합니다.
4. arrayChange: 이 이벤트는 Observable 배열에만 적용됩니다. 배열의 항목을 추가, 제거 또는 교체하는 등 관찰 가능한 배열에 변경 사항이 있을 때 트리거됩니다. 콜백 함수는 영향을 받은 항목(추가, 삭제, 상태 및 색인)의 네 가지 인수를 사용합니다.

또 다른 중요한 점은 구독을 변수에 저장하고 필요한 경우 dispose() 메서드를 사용하여 구독을 취소할 수 있다는 것입니다. 이는 관찰 가능 항목의 변경에 대한 응답으로 UI 업데이트를 일시적으로 또는 영구적으로 비활성화하려는 경우 유용합니다.

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

관찰 가능 항목 유형을 결정하는 방법

1. isObservable(): 이 메소드는 값이 관찰 가능인지 확인하는 데 사용됩니다. 값이 observable(observable, observableArray, 계산 또는 쓰기 가능 계산)이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
2. isWritableObservable(): 이 메서드는 값이 쓰기 가능한 observable(쓰기 가능한 Observable)인지 확인합니다. 값이 쓰기 가능한 관찰 가능 항목이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
3. isCompulated(): 이 메소드는 값이 계산된 Observable인지 확인하는 데 사용됩니다. 값이 계산된 관찰 가능 항목이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
4. isPureCompulated(): 이 메소드는 값이 순수 계산 관찰 가능인지 확인합니다. 순수 계산 Observable은 다른 순수 Observable에만 의존하며 내부 기록 로직이 없습니다. 값이 Pure Computed Observable이면 true를 반환하고 그렇지 않으면 false를 반환합니다.

---

관찰 가능한 배열

Observable 배열은 Observable의 확장이며 관찰 가능해야 하는 데이터 목록을 처리하는 데 사용됩니다. 표준 JavaScript 배열과 달리 관찰 가능한 배열을 사용하면 목록 데이터의 변경 사항을 자동으로 추적하고 사용자 인터페이스를 반응적으로 업데이트할 수 있습니다.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

Observable 배열에는 항목을 반응적으로 추가, 제거 및 조작할 수 있는 특정 메서드가 있습니다. 이러한 방법 중 일부는 다음과 같습니다.

• indexOf(값): 배열에서 해당 매개변수와 동일한 첫 번째 항목의 인덱스를 반환하거나, 일치하는 값이 없으면 값 -1을 반환합니다.
• push(item): 배열;
끝에 새 항목을 추가합니다.
• pop(): 배열에서 마지막 항목을 제거하고 반환합니다.
• Shift(): 배열;
에서 첫 번째 항목을 제거하고 반환합니다.
• unshift(item): 배열;
의 시작 부분에 새 항목을 추가합니다.
• 제거(항목): 배열;
에서 특정 항목을 제거합니다.
• RemoveAll([매개변수]): 배열에서 모든 항목을 제거하고, 전달된 매개변수 내의 항목을 제거하는 배열 형식의 매개변수를 받을 수 있습니다.
• replacement(oldItem, newItem): 첫 번째 매개변수에 전달된 항목을 두 번째 매개변수로 바꿉니다.
• reverse(): 원본 배열의 항목 순서를 변경하고 새 순서를 반영하도록 사용자 인터페이스를 업데이트합니다.
• reversed(): 배열의 역방향 복사본을 반환합니다.
• splice(index, count, items): 배열의 특정 위치에 항목을 추가하거나 제거할 수 있습니다.
• Slice(): 시작 인덱스에서 시작하여 end-1 인덱스로 이동하는 배열 하위 집합의 복사본을 반환합니다. 시작값과 끝값은 선택사항이며, 제공되지 않은 경우;
• sort(): 항목의 순서를 결정합니다. 해당 기능이 제공되지 않으면 이 메서드는 항목을 알파벳 오름차순(문자열의 경우) 또는 숫자의 오름차순(숫자)으로 정렬합니다.
• sorted(): 정렬된 배열의 사본을 반환합니다. 원본 관찰 가능한 배열을 변경하지 않고 특정 순서로 표시해야 하는 경우 sort() 메서드를 사용하는 것이 더 좋습니다.

push 및 splice와 같이 배열의 내용을 수정하는 함수의 경우 KO 메소드는 등록된 모든 리스너에게 변경 사항을 알릴 수 있도록 종속성 추적 메커니즘을 자동으로 트리거합니다. 인터페이스가 자동으로 업데이트됩니다. 이는 KO 메서드(observableArray.push(...) 등)를 사용하는 것과 기본 JavaScript array 메서드(observableArray() .push(.. 등)를 사용하는 것 사이에 상당한 차이가 있음을 의미합니다. .)), 후자는 배열 구독자에게 콘텐츠가 변경되었다는 알림을 보내지 않기 때문입니다.

구독을 사용하고 다른 Observable과 마찬가지로 observableArray에 액세스하는 것이 가능하지만 KnockoutJs는 배열이 어떻게 작동하는지 알아내는 초고속 방법도 제공합니다. Observable이 변경되었습니다(방금 추가, 삭제 또는 이동된 항목). 다음과 같이 어레이 변경 사항을 구독할 수 있습니다.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

---

계산된 관찰 가능 항목

계산된 Observable은 하나 이상의 observable에 의존하는 함수이며 이러한 종속성이 변경될 때마다 자동으로 업데이트됩니다. 함수는 종속성이 변경될 때마다 한 번씩 호출되며 반환되는 모든 값은 UI 요소 또는 기타 계산된 관찰 가능 항목과 같은 관측 가능 항목으로 전달됩니다.

계산된 Observable과 Observable의 주요 차이점은 계산된 Observable이 값을 직접 저장하지 않는다는 것입니다. 대신 다른 관찰 가능 항목을 사용하여 값을 계산합니다. 이는 계산된 Observable의 값이 종속된 Observable이 수정될 때 항상 자동으로 업데이트된다는 의미입니다.

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

계산된 관측값의 방법

1. dispose(): 이 메소드는 계산된 Observable이 더 이상 필요하지 않을 때 삭제(정리)하는 데 사용됩니다. 계산된 관찰 가능 개체;
와 관련된 모든 구독 및 종속성을 제거합니다.
2. Extension(): 이 메소드를 사용하면 계산된 Observable에 사용자 정의 익스텐더를 추가할 수 있습니다. Extender는 계산된 Observable의 동작을 수정할 수 있는 함수입니다.
3. getDependencyCount(): 이 메소드는 계산된 Observable;에 종속된 observable
수를 반환합니다.
4. getDependency(): 이 메소드는 계산된 Observable;의 종속성인 observable
을 포함하는 배열을 반환합니다.
5. getSubscriptionsCount(): 이 메소드는 계산된 Observable;
에서 현재 구독 수를 반환합니다.
6. isActive(): 이 메소드는 계산된 관찰 가능 항목이 현재 활성 상태인지 여부를 나타내는 부울 값을 반환합니다(계산된 관찰 가능 항목이 변경으로 인해 평가 중인 경우 활성 상태임). 종속성 );
7. peek(): 이 메소드는 계산된 Observable의 현재 값에 액세스하는 데 사용되는 괄호 연산자()와 유사합니다. 그러나 peek 메소드는 계산된 Observable과 그것이 호출되는 위치
사이에 종속성을 생성하지 않습니다.
8. subscribe(): 이 메소드를 사용하면 Computed Observable 값이 변경될 때마다 알림을 받도록 구독할 수 있습니다.

이것

ko.computed의 두 번째 매개변수는 계산된 observable을 평가할 때 이 값을 설정합니다. 이를 전달하지 않으면 this.firstName() 또는 this.lastName()을 참조할 수 없습니다.

이를 완전히 추적할 필요가 없도록 하는 규칙이 있습니다. viewmodel의 생성자가 이에 대한 참조를 다른 변수(전통적으로 self라고 함)에 복사하는 경우 viewmodel 다른 것을 참조하기 위해 재정의되는 것에 대해 걱정할 필요가 없습니다.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

self는 함수 종료 시 캡처되기 때문에

계산된 관찰 가능 항목의 평가자와 같은 모든 중첩 함수에서 사용 가능하고 일관성을 유지합니다. 이 규칙은 이벤트 핸들러와 관련하여 훨씬 더 유용합니다.

순수 계산된 관측 가능 항목

계산된 관찰 가능 항목이 일부 관찰 가능한 종속성을 기반으로 값을 단순히 계산하고 반환하는 경우 ko.computed 대신 ko.pureComputed로 선언하는 것이 좋습니다.

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

계산된 Observable이 순수로 선언되면 해당 평가자는 다른 개체나 상태를 직접 수정하지 않으며 KnockoutJ는 재평가 및 메모리 사용량을 보다 효율적으로 관리할 수 있습니다. KnockoutJs는 다른 코드에 활성 종속성이 없으면 자동으로 일시 중지하거나 해제합니다.

쓰기 가능한 계산된 Observable

쓰기 가능한 계산된 관찰 가능 항목은 읽기와 쓰기를 통해 업데이트할 수 있는 계산된 관찰 가능 항목을 생성할 수 있는 계산된 관찰 가능 항목의 확장입니다. 다른 Observable을 기반으로 값만 계산하고 값을 직접 저장하지 않는 기존 Computed Observable과 달리 Writable Computed Observable은 값을 저장하고 이 값을 업데이트하는 기능도 제공합니다. 필요할 때.

쓰기 가능한 계산된 Observable을 생성하려면 읽기 및 쓰기라는 두 가지 주요 속성을 포함하는 구성 개체와 함께 ko.computed 함수를 사용해야 합니다. read 속성에는 observable의 값을 결정하는 계산 함수가 포함되어 있고, write 속성에는 observable의 값을 업데이트하려고 할 때 호출되는 함수가 포함되어 있습니다.

위 내용은 KnockoutJ에서 Observable이 작동하는 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!