KnockoutJs での Observable の仕組み

このコンテンツは基本的にオリジナル資料の翻訳です。目的は、Magento 2 の KnockoutJs について学び、KnockoutJs に関するポルトガル語のコンテンツを作成することです。

ドキュメント

• KnockoutJs: オブザーバブル
• KnockoutJs: Observable 配列
• KnockoutJs: 計算されたオブザーバブル
• KnockoutJs: 書き込み可能な計算されたオブザーバブル
• KnockoutJs: 純粋に計算されたオブザーバブル
• KnockoutJs: 計算されたオブザーバブル

---

観測可能なもの

KnockoutJs は、observables の概念を導入します。これは、値を監視し、値が変更されたときに自動的に更新できるプロパティです。この機能により、ユーザー インターフェイスが Model.

データの変更に動的に反応できるようになります。

KnockoutJs でオブザーバブルを作成するには、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 arrays、およびすべての計算された Observables;
に対して true を返します。
• ko.isWritableObservable: observables、observable arrays、および writable computed observables に対して true を返します。

定期購入

observables の サブスクリプション は、observable の値が変更されるたびに通知を受け取ることができるメカニズムです。これらは、オブザーバブルの変更を追跡し、これらの変更に対応し、ユーザー インターフェイスを更新したり、必要に応じて他のアクションを実行したりするために不可欠です。

subscribe() メソッド ***は、observable の値が変更されるたびに実行される *callback 関数を受け取ります。 callback 関数は、observable の新しい値を引数として受け取ります。この関数は 3 つのパラメータを受け入れます。callback は通知が発生するたびに呼び出される関数です。target (オプション) は関数 callback で this の値を定義します。 event (オプション、デフォルトは変更) は、通知を受け取るイベントの名前です。

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

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

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

1. change: これは、observable の値が変更されるたびにサブスクリプションをトリガーするデフォルトのイベントです。これは最も一般的なイベントであり、他のイベントが明示的に指定されていない場合に使用されます。
2. beforeChange: このイベントは、observable の値が変更される前に発生します。 callback 関数は、observable の現在の値と、observable に割り当てられる提案された (新しい) 値の 2 つの引数を受け取ります。これにより、変更される前の現在の値に基づいてアクションを実行できます。
3. afterChange: このイベントは、オブザーバブルの値が変更された後にトリガーされます。コールバック関数は、オブザーバブルの以前の値 (変更前) とオブザーバブルに割り当てられた新しい値の 2 つの引数を受け取ります。これは、特定の変更が発生した後にそれに対応する必要がある場合に便利です。
4. arrayChange: このイベントは、Observables Array に固有です。これは、配列内の項目の追加、削除、置換など、監視可能な配列に変更があったときにトリガーされます。コールバック関数は、影響を受ける項目 (added、deleted、status、および index) の 4 つの引数を取ります。

もう 1 つの重要な点は、サブスクリプションを変数に保存し、必要に応じて、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 (observable、observableArray、computed または writable computed) の場合は true を返し、それ以外の場合は false を返します。
2. isWritableObservable(): このメソッドは、値が書き込み可能な observable (書き込み可能な observable) かどうかを確認します。値が書き込み可能なオブザーバブルの場合は true を返し、それ以外の場合は false を返します。
3. isComputed(): このメソッドは、値が Computed Observable であるかどうかを確認するために使用されます。値が Computed Observable の場合は true を返し、それ以外の場合は false を返します。
4. isPureComputed(): このメソッドは、値が Pure Computed Observable であるかどうかを確認します。 純粋な計算されたオブザーバブルは、他の純粋なオブザーバブルにのみ依存し、内部記録ロジックを持たないものです。値が Pure Computed Observable の場合は true を返し、それ以外の場合は false を返します。

---

観察可能な配列

Observables Array は、Observable の拡張であり、監視可能にする必要があるデータのリストを処理するために使用されます。標準の JavaScript 配列とは異なり、Observable Array を使用すると、リスト データの変更を自動的に追跡し、ユーザー インターフェイスを反応的に更新できます。

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

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

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

Observables Array には、項目を事後的に追加、削除、操作できるようにする特定のメソッドがあります。これらのメソッドの一部は次のとおりです。

• IndexOf(value): パラメーターに等しい array の最初の項目のインデックスを返します。一致する値が見つからない場合は値 -1 を返します。
• Push(item): 配列;
の末尾に新しい項目を追加します。
• Pop(): 配列; から最後の項目を削除して返します。
• SHIFT(): 配列;
から最初の項目を削除して返します。
• unshift(item): 配列;
の先頭に新しい項目を追加します。
• Remove(item): 配列;
から特定の項目を削除します。
• RemoveAll([parameter]): array からすべての項目を削除し、渡されたパラメータ内の項目を削除する array の形式でパラメータを受け取ることができます。
• replace(oldItem, newItem): 最初のパラメータで渡された項目を 2 番目のパラメータで置き換えます;
• reverse(): 元の 配列 内の項目の順序を変更し、新しい順序を反映するようにユーザー インターフェイスを更新します。
• reversed(): 配列の反転コピーを返します;
• splice(index, count, items): array; 内の特定の位置に項目を追加または削除できます。
• lice(): array のサブセットのコピーを、start インデックスから始まり end-1 インデックスまで返します。開始値と終了値はオプションであり、指定しない場合は;
• sort(): 項目の順序を決定します。関数が指定されていない場合、メソッドは項目をアルファベットの昇順 (文字列 の場合) または数値の昇順 (数値の場合) に並べ替えます。
• sorted(): ソートされた配列のコピーを返します。元の 観察可能な配列 を変更する必要はないが、特定の順序で表示する必要がある場合は、sort() メソッドよりも推奨されます。

push や splice など、配列の内容を変更する関数の場合、KO メソッドは依存関係追跡メカニズムを自動的にトリガーして、登録されているすべてのリスナーに変更が通知されるようにします。これは、KO メソッド (observableArray.push(...) など) とネイティブ JavaScript array メソッド (observableArray() .push(..) の使用の間には大きな違いがあることを意味します。 .))、後者はコンテンツが変更されたという通知を array サブスクライバーに送信しないためです。

他のオブザーバブルと同様に、subscribe を使用して observableArray にアクセスすることは可能ですが、KnockoutJs は、配列 がどのように配置されるかを調べるための超高速メソッドも提供します。 observable が変更されました (追加、削除、または移動された項目)。次のように 配列 の変更をサブスクライブできます:

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

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

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

---

計算されたオブザーバブル

Computed Observables は 1 つ以上の observables に依存する関数であり、これらの依存関係のいずれかが変更されるたびに自動的に更新されます。この関数は依存関係が変更されるたびに 1 回呼び出され、関数が返す値はすべて オブザーバブル (UI 要素や他の 計算されたオブザーバブル など) に渡されます。

Computed Observables と Observables の主な違いは、Computed Observables は値を直接保存しないことです。代わりに、他のオブザーバブルに依存して値を計算します。これは、Computed 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. destroy(): このメソッドは、Computed Observable が不要になったときにそれを破棄 (クリーンアップ) するために使用されます。 Computed Observable;
に関連付けられたすべてのサブスクリプションと依存関係が削除されます。
2. extend(): このメソッドを使用すると、カスタム エクステンダーを Computed Observable に追加できます。エクステンダーは、Computed Observable; の動作を変更できる関数です。
3. getDependencyCount(): このメソッドは、Computed Observable; に依存する observables
の数を返します。
4. getDependency(): このメソッドは、Computed Observable; の依存関係である observables
を含む配列を返します。
5. getSubscriptionsCount(): このメソッドは、Computed Observable;
から現在のサブスクリプションの数を返します。
6. isActive(): このメソッドは、Computed Observable が現在アクティブかどうかを示すブール値を返します (Computed Observable は、変更により評価中の場合はアクティブです)依存関係内);
7. Peak(): このメソッドは、Computed Observable の現在の値にアクセスするために使用される括弧演算子 () に似ています。ただし、peek メソッドは、Computed Observable とそれが呼び出される場所との間に依存関係を作成しません。
8. subscribe(): このメソッドを使用すると、Computed Observable の値が変更されるたびに通知を受け取るようにサブスクライブできます。

これ

ko.computed の 2 番目のパラメーターは、計算された observable を評価するときに this の値を設定します。これを渡さないと、this.firstName() または this.lastName() を参照できなくなります。

これを完全に追跡する必要性を回避する規則があります。viewmodel のコンストラクターが this への参照を別の変数 (伝統的に self と呼ばれます) にコピーする場合、viewmodel を使用すると、他のものを参照するために再定義されることを心配する必要はありません。

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

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

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

self は関数の終了時にキャプチャされるため、

計算されたオブザーバブル の評価器など、ネストされた関数内で利用可能であり、一貫性が保たれます。この規則は、イベント ハンドラーに関してはさらに便利です。

純粋な 計算されたオブザーバブル

computed observable が、いくつかの監視可能な依存関係に基づいて単純に計算して値を返す場合、それを 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);

computed observable が pure として宣言されている場合、その評価者は他のオブジェクトや状態を直接変更せず、KnockoutJs はその再評価とメモリ使用量をより効率的に管理できます。 KnockoutJs は、他のコードにアクティブな依存関係がない場合、自動的に一時停止または解放します。

書き込み可能な計算されたオブザーバブル

Writable Computed Observables は、読み取りと書き込みの両方で更新できる Computed Observables の作成を可能にする Computed Observables の拡張です。他のオブザーバブルに基づいて値を計算するだけで値を直接保存しない従来の Computed Observables とは異なり、Writable Computed Observables は値を保存でき、この値を更新する関数も提供します。必要に応じて。

Writable Computed Observable を作成するには、読み取りと書き込みという 2 つの主要なプロパティを含む構成オブジェクトで ko.computed 関数を使用する必要があります。 read プロパティには、observable の値を決定する計算関数が含まれており、write プロパティには、observable の値を更新するときに呼び出される関数が含まれています。

以上がKnockoutJs での Observable の仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。