搜尋

首頁 >web前端 >js教程 >Observables 在 KnockoutJs 中如何運作

Observables 在 KnockoutJs 中如何運作

Susan Sarandon
Susan Sarandon原創
2024-10-29 20:45:03917瀏覽

Como funcionam Observables no KnockoutJs

此內容基本上是原始資料的翻譯。目的是了解 Magento 2 的 KnockoutJs 並用葡萄牙語創建有關 KnockouJs 的內容。

文件

  • KnockoutJs：可觀察物件
  • KnockoutJs：可觀察數組
  • KnockoutJs：計算可觀察量
  • KnockoutJs：可寫的計算可觀察物件
  • KnockoutJs：純計算可觀察量
  • KnockoutJs：計算可觀察量

可觀測值

KnockoutJs 引入了 observables 的概念，這些屬性是可以被監視並在其值發生變化時自動更新的屬性。此功能允許使用者介面動態回應 模型.

資料的變化

要在 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 陣列 和所有計算的 observables 回傳 true;
  • ko.isWritableObservable：對於 observables、observable 陣列 和 writable 計算的 observables.
回傳 true true

訂閱

observables 中的 訂閱 是一種機制，可讓您在 observable 的值發生變化時收到通知。它們對於追蹤可觀察量

中的變化並對這些變化做出反應、更新使用者介面或在必要時採取其他操作至關重要。

subscribe() 方法 *** 接收一個 *callback 函數，每當 observable 的值被修改時就會執行函數。 callback 函數接收 observable 的新值作為參數。此函數接受三個參數：callback是每當通知發生時調用的函數，target（可選）在函數callback中定義this的值和event
（可選；預設為change）是接收通知的事件名稱。 

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 的建議（新）值。這允許您在更改之前根據當前值執行操作；
  3. afterChange: 該事件在 observable 的值改變後觸發。回呼函數將接收兩個參數：可觀察量的先前值（更改之前）和分配給可觀察量的新值。當您需要在發生特定變化後對其做出反應時，它非常有用。
  4. arrayChange: 此事件特定於 Observables 陣列。當可觀察數組發生變更（例如新增、刪除或替換數組中的項目）時會觸發它。回調函數採用四個參數：受影響的項目（新增、刪除、狀態和索引）。

另一個重要的一點是可以將訂閱儲存在變數中，並在必要時使用 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、compulated 或 writable Computed），則傳回 true，否則傳回 false。否則回傳 false。否則回傳 false。否則回傳 false。否則回傳 false。
  2. isWritableObservable()：此方法檢查值是否為可寫的 observable (可寫 observable)。如果值是可寫入的 observable，則傳回 true，否則傳回 false；
  3. isCompated()：此方法用於檢查某個值是否為計算的可觀察物件。如果值是 Compulated Observable，則傳回 true，否則傳回 false；
  4. isPureCompulated()：此方法檢查值是否為純計算可觀察。 純計算可觀察量 是僅依賴其他純可觀察量 且沒有內部記錄邏輯的一個。如果值是 Pure Computed Observable，則傳回 true，否則傳回 false。

可觀察數組

Observables 陣列 是 observables 的擴展，用於處理需要可觀察的資料清單。與標準 JavaScript 陣列 不同，Observable 陣列 允許您自動追蹤清單資料的變更並回應式更新使用者介面。 

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

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

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

Observables 陣列 具有特定的方法，可讓您以反應方式新增、刪除和操作項目。其中一些方法是：

  • indexOf(value)：傳回陣列中與其參數相等的第一項的索引，如果沒有找到符合的值，則傳回值-1。
  • push(item): 將一個新項目加入陣列的結尾;
  • pop()：刪除並傳回陣列中的最後一項；
  • shift()：刪除並傳回陣列中的第一項；
  • unshift(item)：將新項目加入陣列的開頭;
  • remove(item)：從陣列移除特定項目
    • ;
  • removeAll([parameter])：從 array 中刪除所有項目，並且可以接收 array
    • 形式的參數，該參數將刪除傳遞參數中的項目；
    • Replace(oldItem, newItem)：將第一個參數傳入的item替換為第二個參數；
  • verse()：更改原始陣列
    • 中項目的順序並更新使用者介面以反映新順序；
    • revered()：傳回陣列的反向副本；
  • splice(index, count, items)：允許您在陣列中的特定位置新增或刪除項目；
  • slice()：傳回 array
    • 子集的副本，從起始索引開始一直到 end-1 索引。開始和結束值是可選的，如果沒有提供；
  • sort()：決定項目的順序。如果未提供該函數，則該方法將按字母升序（對於字串
    • ）或升序數字順序（對於數字）對項目進行排序；
  • sorted()：傳回已排序陣列的副本。如果你需要不改變原來的可觀察數組
    • ，但需要按照特定的順序顯示，則優於sort()方法；

對於修改陣列內容的函數，例如push 和splice，KO 方法會自動觸發依賴追蹤機制，以便所有註冊的監聽器都收到更改通知並且你的介面會自動更新，這意味著使用KO 方法（observableArray.push(...) 等）和原生JavaScript array 方法（observableArray() .push(.. .))，因為後者不會向array

訂閱者發送任何內容已更改的通知。

雖然可以像任何其他可觀察對像一樣使用subscribe 並訪問observableArray，但KnockoutJs 還提供了一種超級快速的方法來找出array observable 確實發生了變化（哪些項目剛剛被新增、刪除或移動）。您可以訂閱數組
更改，如下所示：

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

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

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

計算的可觀測值

計算的 Observables 是依賴一個或多個 observables 的函數，只要這些依賴項發生任何變化，就會自動更新。每次其依賴項發生變更時，該函數都會被呼叫一次，並且它傳回的任何值都會傳遞給 observables，例如 UI 元素或其他 計算的 observables 。

Compated Observables 和Observables 之間的主要區別是Compulated Observables 不直接儲存值；相反，它們依賴其他可觀察值來計算它們的值。這意味著當 Compated Observable 所依賴的任何 observables 被修改時，它的值總是會自動更新。 

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()：此方法用於在不再需要時處置（清理）計算的可觀察物件。它刪除與 Compated Observable;
    2. 關聯的所有訂閱和依賴項
  2. extend()：此方法可讓您將自訂擴充器新增至計算的Observable。擴展器是可以修改 Compulated Observable; 行為的函數
  3. getDependencyCount()：此方法傳回依賴 Compated Observable 的 observables 數量；
  4. getDependency()：此方法傳回一個包含 observables 的陣列，這些 observables 是
    5. Compulated Observable
  5. ; 的依賴項 getSubscriptionsCount()：此方法傳回來自
    6. Compulated Observable
  6. ; 的目前訂閱數量 isActive()：此方法傳回一個布林值，指示Compated Observable 目前是否處於活動狀態（如果
    7. Compulated Observable
  7. 由於更改而處於評估過程中，則它是活動的在其依賴項中）； peek()：此方法類似於用於存取 Compulated Observable 的目前值的括號運算子 ()。然而，peek 方法不會在
    8. Compated Observable
  8. 和呼叫它的地方之間創建依賴關係； subscribe()：此方法可讓您訂閱，以便在
    9. Compated Observable
的值變更時接收通知。

這 ko.compulated 的第二個參數在評估計算的

observable 時設定 this 的值。如果不傳遞它，就不可能引用 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.pureCompulated而不是ko.compulated。 

let myObservable = ko.observable(0);

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

當計算的可觀察量被宣告為pure時，其求值器不會直接修改其他物件或狀態，KnockoutJs可以更有效地管理其重新求值和記憶體使用。如果沒有其他程式碼主動依賴它，KnockoutJs 將自動掛起或釋放它。

可寫的計算可觀察量

可寫入計算的可觀察量是計算的可觀察量的擴展，它允許創建計算的可觀察量，可以透過讀取和寫入來更新。與傳統的Compulated Observables 不同，傳統的Compulated Observables 僅根據其他observables 計算其值，並且不直接儲存值，

Writable Computed Observables

可以儲存值，並提供更新該值的函數必要時。 要建立一個可寫入計算的Observable，需要將 ko.compulated 函數與包含兩個主要屬性的配置物件一起使用：讀取和寫入。 read 屬性包含計算函數來決定 observable 的值，而 write 屬性包含當您想要更新

observable 的值時調用的函數。

以上是Observables 在 KnockoutJs 中如何運作的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript Array define count sort for Interface Event this tr
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何使 HTML `` 欄位成為必填項？下一篇：如何使 HTML `` 欄位成為必填項？

相關文章

看更多