KnockoutJS - Observable Terkomputasi
Computed Observable adalah fungsi yang bergantung pada satu atau lebih Observable dan secara otomatis diperbarui setiap kali Observable yang mendasarinya (dependensi) berubah.
Pengamatan Terkomputasi dapat dirantai.
Sintaksis
this.varName = ko.computed(function(){
...
... // function code
...
},this);Contoh
Mari kita lihat contoh berikut yang mendemonstrasikan penggunaan Computed Observables.
<!DOCTYPE html>
<head >
<title>KnockoutJS Computed Observables</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
</head>
<body>
<p>Enter first number: <input data-bind = "value: a" /></p>
<p>Enter second number: <input data-bind = "value: b"/></p>
<p>Average := <span data-bind="text: totalAvg"></span></p>
<script>
function MyViewModel() {
this.a = ko.observable(10);
this.b = ko.observable(40);
this.totalAvg = ko.computed(function() {
if(typeof(this.a()) !== "number" || typeof(this.b()) !== "number") {
this.a(Number(this.a())); //convert string to Number
this.b(Number(this.b())); //convert string to Number
}
total = (this.a() + this.b())/2 ;
return total;
},this);
}
ko.applyBindings(new MyViewModel());
</script>
</body>
</html>Pada baris berikut, dua baris pertama untuk menerima nilai input. Baris ketiga mencetak rata-rata dari dua angka ini.
<p>Enter first number: <input data-bind = "value: a" /></p>
<p>Enter second number: <input data-bind = "value: b"/></p>
<p>Average := <span data-bind = "text: totalAvg"></span></p>Di baris berikut, jenis Observable a dan badalah angka saat mereka diinisialisasi untuk pertama kalinya di dalam ViewModel. Namun, dalam KO setiap input yang diterima dari UI secara default dalam format String. Jadi mereka perlu diubah menjadi Angka untuk melakukan operasi aritmatika pada mereka.
this.totalAvg = ko.computed(function() {
if(typeof(this.a()) !== "number" || typeof(this.b()) !== "number") {
this.a(Number(this.a())); //convert string to Number
this.b(Number(this.b())); //convert string to Number
}
total = (this.a() + this.b())/2 ;
return total;
},this);Di baris berikut, rata-rata yang dihitung ditampilkan di UI. Perhatikan bahwa tipe data-bind dari totalAvg hanyalah teks.
<p>Average := <span data-bind = "text: totalAvg"></span></p>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat cara kerja kode di atas -
Simpan kode di atas computed-observable.htm mengajukan.
Buka file HTML ini di browser.
Masukkan 2 angka apa saja ke dalam kotak teks dan amati bahwa rata-ratanya sudah dihitung.
Mengelola 'Ini'
Perhatikan bahwa dalam contoh di atas, parameter kedua diberikan sebagai thiske fungsi Computed. Tidak mungkin mengacu pada Observablea() dan b() tanpa menyediakan this.
Untuk mengatasinya, self variabel digunakan yang menyimpan referensi this. Melakukannya, tidak perlu melacakthisdi seluruh kode. Sebagai gantinya,self dapat digunakan.
Kode ViewModel berikut ini ditulis ulang untuk contoh di atas menggunakan self.
function MyViewModel(){
self = this;
self.a = ko.observable(10);
self.b = ko.observable(40);
this.totalAvg = ko.computed(function() {
if(typeof(self.a()) !== "number" || typeof(self.b()) !== "number") {
self.a(Number(self.a())); //convert string to Number
self.b(Number(self.b())); //convert string to Number
}
total = (self.a() + self.b())/2 ;
return total;
});
}Pure Computed Observables
A Computed Observable harus dideklarasikan sebagai PureComputed Observable jika Observable itu hanya menghitung dan mengembalikan nilai dan tidak secara langsung memodifikasi objek atau status lain. Pure Computed Observables membantu Knockout mengelola evaluasi ulang dan penggunaan memori secara efisien.
Memberi tahu pelanggan secara eksplisit
Ketika Computed Observable menampilkan nilai tipe data primitif (String, Boolean, Null, dan Number), pelanggannya akan diberi tahu jika dan hanya jika terjadi perubahan nilai aktual. Artinya, jika Observable telah menerima nilai yang sama dengan nilai sebelumnya, maka pelanggannya tidak akan diberi tahu.
Anda bisa membuat Computed Observables selalu secara eksplisit memberi tahu pengamat, meskipun nilai baru sama dengan yang lama dengan menggunakan notify sintaks sebagai berikut.
myViewModel.property = ko.pureComputed(function() {
return ...; // code logic goes here
}).extend({ notify: 'always' });Membatasi Pemberitahuan Perubahan
Terlalu banyak pembaruan yang mahal dapat menyebabkan masalah kinerja. Anda dapat membatasi jumlah notifikasi yang akan diterima dari Observable menggunakanrateLimit atribut sebagai berikut.
// make sure there are updates no more than once per 100-millisecond period
myViewModel.property.extend({ rateLimit: 100 });Mencari Tahu Jika Properti Dihitung Dapat Diamati
Dalam situasi tertentu, mungkin perlu untuk mengetahui apakah sebuah properti adalah Computed Observable. Fungsi berikut dapat digunakan untuk mengidentifikasi jenis Observable.
| Sr.No. | Fungsi |
|---|---|
| 1 | ko.isComputed Kembali true jika properti tersebut adalah Computed Observable. |
| 2 | ko.isObservable Kembali true jika properti adalah Observable, Observable array, atau Computed Observable. |
| 3 | ko.isWritableObservable Kembali trueapakah Observable, Observable array, atau Writable Computed Observable. (Ini juga disebut sebagai ko.isWriteableObservable) |
Dapat ditulisi Computed Observables
Computed Observable diturunkan dari satu atau beberapa Observable lainnya, jadi hanya bisa dibaca. Namun, ada kemungkinan seseorang dapat membuat Computed Observable dapat ditulis. Untuk ini, Anda perlu menyediakan fungsi panggilan balik yang berfungsi pada nilai tertulis.
Computed Observables yang dapat ditulis ini bekerja seperti Observable biasa. Selain itu, mereka membutuhkan logika khusus yang akan dibangun untuk mengganggu tindakan baca dan tulis.
Seseorang dapat menetapkan nilai ke banyak properti Observable atau Computed Observable menggunakan sintaks chaining sebagai berikut.
myViewModel.fullName('Tom Smith').age(45)Contoh
Contoh berikut menunjukkan penggunaan Writable Computable Observable.
<!DOCTYPE html>
<head >
<title>KnockoutJS Writable Computed Observable</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
</head>
<body>
<p>Enter your birth Date: <input type = "date" data-bind = "value: rawDate" ></p>
<p><span data-bind = "text: yourAge"></span></p>
<script>
function MyViewModel() {
this.yourAge = ko.observable();
today = new Date();
rawDate = ko.observable();
this.rawDate = ko.pureComputed ({
read: function() {
return this.yourAge;
},
write: function(value) {
var b = Date.parse(value); // convert birth date into milliseconds
var t = Date.parse(today); // convert todays date into milliseconds
diff = t - b; // take difference
var y = Math.floor(diff/31449600000); // difference is converted
// into years. 31449600000
//milliseconds form a year.
var m = Math.floor((diff % 31449600000)/604800000/4.3); // calculating
// months.
// 604800000
// milliseconds
// form a week.
this.yourAge("You are " + y + " year(s) " + m +" months old.");
},
owner: this
});
}
ko.applyBindings(new MyViewModel());
</script>
</body>
</html>Pada kode di atas, rawDate adalah properti pureComputed yang diterima dari UI. yourAge Dapat diamati berasal dari rawDate.
Tanggal di JavaScript dimanipulasi dalam milidetik. Oleh karena itu, kedua tanggal (hari ini tanggal dan tanggal lahir) diubah menjadi milidetik dan kemudian perbedaan di antara keduanya diubah kembali dalam tahun dan bulan.
Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat cara kerja kode di atas -
Simpan kode di atas writable_computed_observable.htm mengajukan.
Buka file HTML ini di browser.
Masukkan tanggal lahir dan amati bahwa usianya sudah dihitung.