Cara Observables berfungsi dalam KnockoutJs

Kandungan ini pada asasnya adalah terjemahan bahan asal. Hasratnya adalah untuk mengetahui tentang KnockoutJs untuk Magento 2 dan mencipta kandungan dalam bahasa Portugis tentang KnockouJs.

Dokumentasi

• KnockoutJs: Boleh Diperhatikan
• KnockoutJs: Tatasusunan Boleh Cerap
• KnockoutJs: Computed Observables
• KnockoutJs: Boleh Tulis Dikira Boleh Cerap
• KnockoutJs: Cerap Berkomputer Tulen
• KnockoutJs: Computed Observables

Boleh diperhatikan

KnockoutJs memperkenalkan konsep observables, iaitu sifat yang boleh dipantau dan dikemas kini secara automatik apabila nilainya berubah. Fungsi ini membolehkan antara muka pengguna bertindak balas secara dinamik kepada perubahan dalam Model.

Untuk mencipta observable dalam KnockoutJs, anda boleh menggunakan fungsi ko.observable() dan memberikan nilai awal kepadanya. Untuk mengakses nilai semasa boleh diperhatikan, anda boleh menganggapnya sebagai fungsi. Untuk hanya memerhati sesuatu tanpa nilai awal, hanya panggil sifat Boleh Diperhatikan tanpa parameter.

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

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

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

• ko.isObservable: mengembalikan benar untuk observables, observable arrays dan semua computed observables;
• ko.isWritableObservable: mengembalikan benar untuk observables, observable array dan writable computed observables.

Langganan

langganan dalam observables ialah mekanisme yang membolehkan anda dimaklumkan apabila nilai observable berubah. Ia penting untuk menjejaki perubahan dalam observables dan bertindak balas terhadap perubahan ini, mengemas kini antara muka pengguna atau mengambil tindakan lain apabila perlu.

Kaedah subscribe() ***menerima fungsi *panggilan balik yang akan dilaksanakan apabila nilai observable diubah suai. Fungsi panggil balik menerima sebagai argumen nilai baharu boleh diperhatikan. Fungsi ini menerima tiga parameter: panggilan balik ialah fungsi yang dipanggil apabila pemberitahuan berlaku, sasaran (pilihan) mentakrifkan nilai ini dalam fungsi panggilan balik dan acara (pilihan; lalai ialah perubahan) ialah nama acara untuk menerima pemberitahuan.

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

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

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

1. tukar: Ini ialah acara lalai yang mencetuskan langganan apabila nilai boleh diperhatikan berubah. Ia adalah peristiwa yang paling biasa dan digunakan apabila tiada acara lain dinyatakan secara eksplisit;
2. beforeChange: Acara ini dipecat sebelum nilai observable ditukar. Fungsi panggil balik akan menerima dua argumen: nilai semasa observable dan nilai cadangan (baharu) yang akan diberikan kepada observable. Ini membolehkan anda melakukan tindakan berdasarkan nilai semasa sebelum ia ditukar;
3. afterChange: Peristiwa ini dicetuskan selepas nilai yang boleh diperhatikan ditukar. Fungsi panggil balik akan menerima dua argumen: nilai sebelumnya bagi yang boleh diperhatikan (sebelum perubahan) dan nilai baharu yang telah diberikan kepada yang boleh diperhatikan. Ia berguna apabila anda perlu bertindak balas terhadap perubahan tertentu selepas ia berlaku.
4. arrayChange: Acara ini khusus untuk Observables Arrays. Ia dicetuskan apabila terdapat perubahan pada tatasusunan yang boleh diperhatikan, seperti menambah, mengalih keluar atau menggantikan item dalam tatasusunan. Fungsi panggil balik mengambil empat argumen: item yang terjejas (ditambah, dipadamkan, status dan indeks).

Satu lagi perkara penting ialah anda boleh menyimpan langganan dalam pembolehubah dan, jika perlu, membatalkan langganan menggunakan kaedah dispose(). Ini berguna apabila anda ingin melumpuhkan pengemaskinian UI buat sementara atau kekal sebagai tindak balas kepada perubahan dalam boleh diperhatikan.

let myObservable = ko.observable(0);

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

Kaedah untuk menentukan jenis yang boleh diperhatikan

1. isObservable(): Kaedah ini digunakan untuk menyemak sama ada nilai ialah boleh diperhatikan. Ia kembali benar jika nilai ialah boleh diperhatikan (observable, observableArray, computed atau writable computed), dan false sebaliknya.
2. isWritableObservable(): Kaedah ini menyemak sama ada nilai boleh ditulis observable (writable observable). Ia mengembalikan benar jika nilai itu boleh ditulis boleh diperhatikan dan palsu sebaliknya;
3. isComputed(): Kaedah ini digunakan untuk menyemak sama ada nilai ialah Computed Observable. Ia mengembalikan benar jika nilainya ialah Computed Observable dan false sebaliknya;
4. isPureComputed(): Kaedah ini menyemak sama ada nilai ialah Pure Computed Observable. Pure Computed Observable ialah salah satu yang bergantung hanya pada pure observable yang lain dan tidak mempunyai logik rakaman dalaman. Ia mengembalikan benar jika nilainya ialah Pure Computed Observable dan false sebaliknya.

Tatasusunan Boleh Diperhatikan

Array Boleh Cerap ialah lanjutan daripada boleh diperhatikan dan digunakan untuk menangani senarai data yang perlu diperhatikan. Tidak seperti array JavaScript standard, Array Boleh Diperhatikan membolehkan anda menjejaki perubahan pada menyenaraikan data secara automatik dan mengemas kini antara muka pengguna secara reaktif.

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

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

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

Array Boleh Diperhatikan mempunyai kaedah khusus yang membolehkan anda menambah, mengalih keluar dan memanipulasi item secara reaktif. Antara kaedah ini ialah:

• indexOf(value): Mengembalikan indeks item pertama array yang sama dengan parameternya, atau nilai -1 jika tiada nilai sepadan ditemui.
• push(item): Menambah item baharu pada penghujung tatasusunan;
• pop(): Mengalih keluar dan mengembalikan item terakhir daripada tatasusunan;
• shift(): Mengalih keluar dan mengembalikan item pertama daripada tatasusunan;
• unshift(item): Menambah item baharu pada permulaan tatasusunan;
• remove(item): Mengalih keluar item tertentu daripada array;
• removeAll([parameter]): Mengalih keluar semua item daripada array, dan boleh menerima parameter dalam bentuk array yang akan mengalih keluar item dalam parameter yang diluluskan;
• replace(oldItem, newItem): Menggantikan item yang diluluskan dalam parameter pertama dengan parameter kedua;
• reverse(): Mengubah susunan item dalam tatasusunan asal dan mengemas kini antara muka pengguna untuk menggambarkan susunan baharu;
• reversed(): Mengembalikan salinan terbalik tatasusunan;
• splice(index, count, item): Membolehkan anda menambah atau mengalih keluar item dalam kedudukan tertentu dalam tatasusunan;
• slice(): Mengembalikan salinan subset array, bermula pada indeks permulaan dan pergi ke indeks akhir-1. Nilai mula dan akhir adalah pilihan, dan jika tidak disediakan;
• sort(): Menentukan susunan item. Jika fungsi tidak disediakan, kaedah mengisih item dalam susunan abjad menaik (untuk rentetan) atau dalam susunan berangka menaik (untuk nombor);
• sorted(): Mengembalikan salinan daripada tatasusunan yang diisih. Ia adalah lebih baik daripada kaedah sort() jika anda tidak perlu menukar tatasusunan boleh diperhatikan asal, tetapi perlu memaparkannya dalam susunan tertentu;

Untuk fungsi yang mengubah suai kandungan tatasusunan, seperti tekan dan splice, kaedah KO secara automatik mencetuskan mekanisme penjejakan kebergantungan supaya semua pendengar berdaftar dimaklumkan tentang perubahan dan antara muka anda dikemas kini secara automatik, yang bermaksud terdapat perbezaan yang ketara antara menggunakan kaedah KO (observableArray.push(...), dll) dan kaedah array JavaScript asli (observableArray() .push(.. .)), kerana yang terakhir tidak menghantar sebarang pemberitahuan kepada array pelanggan bahawa kandungan mereka telah berubah.

Walaupun boleh menggunakan langgan dan mengakses observableArray seperti mana-mana yang boleh diperhatikan, KnockoutJs juga menyediakan kaedah yang sangat pantas untuk mengetahui cara array boleh diperhatikan telah berubah (item yang baru ditambah, dipadamkan atau dialihkan). Anda boleh melanggan perubahan array seperti berikut:

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

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

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

Perhatian Berkomputer

Computed Observables ialah fungsi yang bergantung pada satu atau lebih observables dan akan dikemas kini secara automatik apabila mana-mana kebergantungan ini berubah. Fungsi akan dipanggil sekali setiap kali mana-mana kebergantungannya berubah, dan sebarang nilai yang dikembalikan akan dihantar kepada observables, seperti elemen UI atau computed observables .

Perbezaan utama antara Computed Observable dan Observables ialah Computed Observables tidak menyimpan nilai secara langsung; sebaliknya, mereka bergantung pada pemerhatian lain untuk mengira nilainya. Ini bermakna bahawa nilai Computed Observable sentiasa dikemas kini secara automatik apabila mana-mana observable yang bergantung padanya diubah suai.

let myObservable = ko.observable(0);

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

Kaedah Boleh Cerap Berkomputer

1. dispose(): Kaedah ini digunakan untuk melupuskan (membersihkan) Computed Observable apabila ia tidak lagi diperlukan. Ia mengalih keluar semua langganan dan kebergantungan yang dikaitkan dengan Computed Observable;
2. extend(): Kaedah ini membolehkan anda menambah pemanjang tersuai pada Computed Observable. Extenders ialah fungsi yang boleh mengubah suai kelakuan Computed Observable;
3. getDependenciesCount(): Kaedah ini mengembalikan bilangan observable bergantung pada Computed Observable;
4. getDependencies(): Kaedah ini mengembalikan tatasusunan yang mengandungi observables yang merupakan kebergantungan Computed Observable;
5. getSubscriptionsCount(): Kaedah ini mengembalikan bilangan langganan semasa daripada Computed Observable;
6. isActive(): Kaedah ini mengembalikan nilai Boolean yang menunjukkan sama ada Computed Observable sedang aktif (a Computed Observable aktif jika ia sedang dalam proses dinilai disebabkan oleh perubahan dalam kebergantungannya );
7. peek(): Kaedah ini serupa dengan operator kurungan () yang digunakan untuk mengakses nilai semasa Computed Observable. Walau bagaimanapun, kaedah mengintip tidak mewujudkan pergantungan antara Computed Observable dan tempat ia dipanggil;
8. subscribe(): Kaedah ini membolehkan anda melanggan untuk menerima pemberitahuan apabila nilai Computed Observable berubah.

ini

Parameter kedua kepada ko.computed menetapkan nilai ini apabila menilai boleh diperhatikan yang dikira. Tanpa menghantarnya, tidak mungkin untuk merujuk this.firstName() atau this.lastName().

Terdapat konvensyen yang mengelakkan keperluan untuk menjejaki ini sepenuhnya: jika pembina model pandang anda menyalin rujukan kepada ini ke dalam pembolehubah yang berbeza (secara tradisinya dipanggil diri), anda boleh menggunakan diri sepanjang model pandangan dan tidak perlu risau tentang ia ditakrifkan semula untuk merujuk kepada sesuatu yang lain.

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

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

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

Oleh kerana diri ditangkap pada penutupan fungsi, ia kekal tersedia dan konsisten dalam mana-mana fungsi bersarang, seperti penilai boleh cerap terhitung. Konvensyen ini lebih berguna apabila ia melibatkan pengendali acara.

Tulen pemerhatian yang dikira

Jika computable observable hanya mengira dan mengembalikan nilai berdasarkan beberapa kebergantungan yang boleh diperhatikan, adalah lebih baik untuk mengisytiharkannya sebagai ko.pureComputed dan bukannya ko.computed.

let myObservable = ko.observable(0);

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

Apabila computed observable diisytiharkan sebagai tulen, penilainya tidak langsung mengubah suai objek atau keadaan lain, KnockoutJs boleh mengurus penilaian semula dan penggunaan memorinya dengan lebih cekap. KnockoutJs akan menggantung atau melepaskannya secara automatik jika tiada kod lain yang mempunyai pergantungan aktif padanya.

Boleh Tulis Dikira Boleh Cerap

Boleh Cerap Berkomputer Boleh Tulis ialah lanjutan daripada Boleh Cerap Berkomputer yang membolehkan penciptaan boleh cerap berkomputer yang boleh dikemas kini melalui pembacaan dan penulisan . Tidak seperti Cerhati Berkomputer konvensional, yang hanya mengira nilainya berdasarkan pemerhatian lain dan tidak menyimpan nilai secara langsung, Boleh Cerap Berkomputer Boleh Ditulis boleh menyimpan nilai dan juga menyediakan fungsi untuk mengemas kini nilai ini apabila perlu.

Untuk mencipta Boleh Diperhatikan Pengiraan Boleh Tulis, anda perlu menggunakan fungsi ko.computed dengan objek konfigurasi yang mengandungi dua sifat utama: baca dan tulis. Sifat baca mengandungi fungsi pengiraan untuk menentukan nilai boleh diperhatikan, manakala sifat tulis mengandungi fungsi yang dipanggil apabila anda ingin mengemas kini nilai boleh diperhatikan.

Atas ialah kandungan terperinci Cara Observables berfungsi dalam KnockoutJs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!