KnockoutJS - Gözlemlenebilirler

KnockoutJS, aşağıdaki 3 önemli kavram üzerine inşa edilmiştir.

Gözlemlenebilirler ve aralarındaki bağımlılık takibi - DOM öğeleri ViewModel'e 'veri bağlama' yoluyla bağlanır. Gözlemlenebilirler aracılığıyla bilgi alışverişinde bulunurlar. Bu, bağımlılık takibini otomatik olarak halleder.
UI ve ViewModel arasındaki Bildirime Dayalı Bağlamalar - DOM öğeleri, ViewModel'e 'veri bağlama' konsepti aracılığıyla bağlanır.
Yeniden kullanılabilir bileşenler oluşturmak için şablon oluşturma - Şablon oluşturma, karmaşık web uygulamaları oluşturmak için sağlam bir yol sağlar.

Bu bölümde Gözlemlenebilirleri inceleyeceğiz.

Adından da anlaşılacağı gibi, bir ViewModel verisini / özelliğini Gözlemlenebilir olarak bildirdiğinizde, her seferinde herhangi bir veri değişikliği, verilerin kullanıldığı tüm yerlerde otomatik olarak yansıtılır. Bu, ilgili bağımlılıkları yenilemeyi de içerir. KO bunlarla ilgilenir ve bunu başarmak için fazladan kod yazmaya gerek yoktur.

Observable kullanarak, UI ve ViewModel'in dinamik olarak iletişim kurması çok kolay hale geliyor.

Sözdizimi

ViewModel özelliğini işlevle bildirmeniz yeterlidir. ko.observable() Gözlenebilir hale getirmek için.

this.property = ko.observable('value');

Misal

Observable'ın kullanımını gösteren aşağıdaki örneğe bir göz atalım.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Observable Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>Enter your name: <input data-bind = "value: yourName" /></p>
      <p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

         function AppViewModel() {
            this.yourName = ko.observable("");
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>
   </body>
</html>

Aşağıdaki satır giriş kutusu içindir. Görüldüğü gibi, isim değerinizi ViewModel'e bağlamak için data-bind özelliğini kullandık.

<p>Enter your name: <input data-bind = "value: yourName" /> <p>

Aşağıdaki satır yalnızca adınızın değerini yazdırır. Burada veri bağlama türünün, sadece değeri okuduğumuz için metin olduğuna dikkat edin.

<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

Aşağıdaki satırda, ko.observable verilerdeki herhangi bir değişiklik için yourName değişkenine göz kulak olur. Bir değişiklik olduğunda, ilgili yerler de değiştirilen değerle güncellenir. Aşağıdaki kodu çalıştırdığınızda, bir giriş kutusu görünecektir. Bu giriş kutusunu güncellediğinizde, yeni değer kullanıldığı her yerde yansıtılır veya yenilenir.

this.yourName = ko.observable("");

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için aşağıdaki adımları uygulayalım -

Yukarıdaki kodu şuraya kaydedin: first_observable_pgm.htm dosya.
Bu HTML dosyasını bir tarayıcıda açın.
Adı Scott olarak girin ve adın çıktıda yansıtıldığını gözlemleyin.

Veri değişikliği, kullanıcı arayüzünden veya ViewModel'den yapılabilir. Verilerin nereden değiştirildiğine bakılmaksızın, UI ve ViewModel aralarında senkronizasyonu sürdürür. Bu, onu iki yönlü bir bağlama mekanizması yapar. Yukarıdaki örnekte, giriş kutusundaki adınızı değiştirdiğinizde, ViewModel yeni bir değer alır. Ad özelliğinizi ViewModel içinden değiştirdiğinizde, kullanıcı arabirimi yeni bir değer alır.

Gözlemlenebilirleri Okuma ve Yazma

Aşağıdaki tablo, Gözlemlenebilirler üzerinde gerçekleştirilebilecek okuma ve yazma işlemlerini listeler.

Sr.No.	Okuma / Yazma İşlemi ve Sözdizimi
1	Read Değeri okumak için sadece Observable özelliğini aşağıdaki gibi parametreler olmadan çağırın: AppViewModel.yourName ();
2	Write Gözlemlenebilir özelliğinde değer yazmak / güncellemek için, aşağıdaki gibi parametrede istenen değeri iletmeniz yeterlidir: AppViewModel.yourName ('Bob');
3	Write multiple Birden çok ViewModel özelliği, zincirleme sözdizimi yardımıyla tek bir satırda güncellenebilir, örneğin: AppViewModel.yourName ('Bob'). YourAge (45);

Gözlemlenebilir Diziler

Gözlemlenebilir beyan, tek bir nesnenin veri değişikliklerini ele alır. ObservableArray, nesnelerin koleksiyonuyla çalışır. Bu, birden çok türde değer içeren karmaşık uygulamalarla uğraşırken ve durumlarını kullanıcı eylemlerine göre sık sık değiştirirken çok kullanışlı bir özelliktir.

Sözdizimi

this.arrayName = ko.observableArray();    // It's an empty array

Gözlemlenebilir dizi, yalnızca hangi nesnelerin eklendiğini veya kaldırıldığını izler. Tek tek nesnenin özelliklerinin değiştirilip değiştirilmediğini bildirmez.

İlk Kez Başlatın

Dizinizi başlatabilir ve aynı zamanda ilk değerleri kurucuya aşağıdaki gibi ileterek onu Gözlemlenebilir olarak bildirebilirsiniz.

this.arrayName = ko.observableArray(['scott','jack']);

Gözlemlenebilir Diziden Okuma

Gözlemlenebilir dizi öğelerine aşağıdaki şekilde erişebilirsiniz.

alert('The second element is ' + arrayName()[1]);

ObservableArray Fonksiyonları

KnockoutJS kendi Gözlenebilir dizi işlevlerine sahiptir. Kullanışlılar çünkü -

Bu işlevler tüm tarayıcılarda çalışır.
Bu işlevler, bağımlılık takibini otomatik olarak halledecektir.
Sözdiziminin kullanımı kolaydır. Örneğin, bir diziye bir öğe eklemek için, arrayName () yerine arrayName.push ('value') kullanmanız gerekir. Push ('value').

Aşağıda çeşitli Gözlemlenebilir Dizi yöntemlerinin listesi verilmiştir.

Sr.No.	Yöntemler ve Açıklama
1	itme ('değer') Dizinin sonuna yeni bir öğe ekler.
2	pop() Diziden son öğeyi kaldırır ve onu döndürür.
3	unshift ('değer') Dizinin başına yeni bir değer ekler.
4	vardiya() Diziden ilk öğeyi kaldırır ve onu döndürür.
5	tersine çevirmek() Dizinin sırasını tersine çevirir.
6	çeşit() Dizi öğelerini artan bir sırada sıralar.
7	ekleme (başlangıç dizini, bitiş dizini) 2 parametre kabul eder - başlangıç dizini ve bitiş dizini - öğeleri baştan sona dizinden kaldırır ve bir dizi olarak döndürür.
8	indexOf ('değer') Bu işlev, sağlanan ilk parametre oluşumunun dizinini döndürür.
9	dilim (başlangıç dizini, bitiş dizini) Bu yöntem, bir dizinin bir parçasını keser. Başlangıç dizininden bitiş dizinine kadar olan öğeleri döndürür.
10	hepsini kaldır() Tüm öğeleri kaldırır ve bir dizi olarak döndürür.
11	remove ('değer') Parametreyle eşleşen ve bir dizi olarak dönen öğeleri kaldırır.
12	kaldır (işlev (öğe) {koşul}) Koşulu sağlayan öğeleri kaldırır ve bir dizi olarak döndürür.
13	kaldır ([değerler kümesi]) Belirli bir değer kümesiyle eşleşen öğeleri kaldırır.
14	destroyAll() _Destroy özelliğine sahip bir dizideki tüm öğeleri true değeriyle işaretler.
15	destroy('value') Parametreye eşit bir öğeyi arar ve bunu true değerine sahip _destroy özel özelliği ile işaretler.
16	destroy(function(item) { condition}) Koşulu sağlayan tüm öğeleri bulur, onları gerçek değerle _destroy özelliğiyle işaretler.
17	destroy([set of values]) Belirli bir değer kümesiyle eşleşen öğeleri bulur, bunları gerçek değerle _destroy olarak işaretler.

Note - ObservableArrays'den gelen Destroy ve DestroyAll Functions çoğunlukla sadece 'Ruby on Rails' geliştiricileri içindir.

Eğer yöntemini yok kullandığınızda, ilgili ürün gerçekten o anda diziden silinmez ancak mülkiyet ile işaretleyerek gizli yapılmış olan _destroy ile gerçek , arayüzde tarafından okunamaz böylece değer. _Destroy , true değerine eşit olarak işaretlenen öğeler daha sonra JSON nesne grafiği ile çalışırken silinir.