Polimer - Sistem Data

Polymer memungkinkan pengamatan perubahan pada properti elemen dengan mengambil tindakan berbeda seperti -

Observers - Ini memanggil callback setiap kali data berubah.
Computed Properties - Ini menghitung properti virtual berdasarkan properti lain, dan menghitung ulang setiap kali data masukan berubah.
Data Bindings - Ini memperbarui properti, atribut, atau konten teks dari simpul DOM menggunakan anotasi setiap kali data berubah.

Jalur Data

Pathadalah string dalam sistem data, yang menyediakan properti atau sub-properti relatif terhadap cakupan. Cakupan dapat menjadi elemen host. Jalur dapat ditautkan ke elemen berbeda menggunakan data binding. Perubahan data dapat dipindahkan dari satu elemen ke elemen lainnya, jika elemen tersebut terhubung dengan data binding.

Contoh

<dom-module id = "my-profile">
   <template>
      . . .
      <address-card address="{{myAddress}}"></address-card>
   </template>
   . . .
</dom-module>

Dua jalur di atas (profil-saya dan kartu-alamat) dapat dihubungkan dengan pengikatan data, jika <address-card> ada di DOM lokal elemen <profil-saya>.

Berikut adalah jenis khusus segmen jalur di Polymer.js -

Karakter wild card (*) dapat digunakan sebagai segmen terakhir di jalur.
Mutasi array dapat ditampilkan ke array tertentu dengan menempatkan sambungan string sebagai segmen terakhir di jalur.
Jalur item larik menunjukkan item dalam larik dan segmen jalur numerik menentukan indeks larik.

Di jalur data, setiap segmen jalur adalah nama properti dan mereka menyertakan dua jenis jalur berikut -

Segmen jalur dipisahkan oleh titik. Misalnya: "apple.grapes.orange".
Dalam larik string, setiap elemen larik adalah segmen jalur atau jalur titik-titik. Misalnya: ["apple", "grapes", "orange"], ["apple.grapes", "orange"].

Aliran data

Contoh

Contoh berikut menentukan pengikatan aliran data dua arah. Buat file index.html dan tambahkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "my-element.html">
   </head>
   
   <body>
      <my-element></my-element>
   </body>
</html>

Sekarang buat file lain bernama my-element.html dan sertakan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "my-element">
   <template>
      <prop-element my-prop="{{demoProp}}"></prop-element>
      <p>
         Present value: <span>{{demoProp}}</span>
      </p>
   </template>
   
   <script>
      Polymer ({
         is: "my-element", properties: {
            demoProp: String
         }
      });
   </script>
</dom-module>

Selanjutnya, buat satu file lagi bernama prop-element.html dan tambahkan kode berikut.

//it specifies the start of an element's local DOM
<dom-module id = "prop-element">
   <template>
      <button on-click = "onClickFunc">Change value</button>
   </template>
   
   <script>
      Polymer ({
         is: "prop-element", properties: {
            myProp: {
               type: String,
               notify: true,
               readOnly: true,
               value: 'This is initial value...'
            }
         },
         onClickFunc: function(){
            this._setMyProp('This is new value after clicking the button...');
         }
      });
   </script>
</dom-module>

Keluaran

Jalankan aplikasi seperti yang ditunjukkan pada bab sebelumnya, dan navigasikan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Setelah mengklik tombol, itu akan mengubah nilai seperti yang ditunjukkan pada tangkapan layar berikut.

Menghubungkan Dua Jalan

Anda bisa menautkan dua jalur ke objek yang sama menggunakan metode linkPaths dan perlu menggunakan data binding untuk menghasilkan perubahan di antara elemen.

Contoh

linkPaths('myTeam', 'players.5');

Tautan jalur dapat dihapus menggunakan metode unlinkPaths seperti yang ditunjukkan di bawah ini -

unlinkPaths('myTeam');

Pengamat

Perubahan yang dapat diamati yang terjadi pada metode pemanggilan data elemen yang dikenal sebagai pengamat. Berikut adalah jenis-jenis pengamat.

Pengamat sederhana digunakan untuk mengamati satu properti.
Pengamat kompleks digunakan untuk mengamati lebih dari satu properti atau jalur.

Pengikatan Data

Data binding dapat digunakan untuk menghubungkan properti atau atribut elemen dari elemen host di DOM lokalnya. Data binding dapat dibuat dengan menambahkan anotasi ke template DOM seperti yang ditunjukkan pada kode berikut.

<dom-module id = "myhost-element">
   <template>
      <target-element target-property = "{{myhostProperty}}"></target-element>
   </template>
</dom-module>

Anatomi data binding di template DOM lokal terlihat seperti berikut -

property-name=annotation-or-compound-binding

atau

attribute-name$=annotation-or-compound-binding

Sisi kiri pengikatan menentukan properti atau atribut target, sedangkan sisi kanan pengikatan menentukan anotasi pengikatan atau pengikatan gabungan. Teks dalam anotasi penjilidan diapit oleh pembatas kurung kurawal ganda ({{}}) atau kurung siku ganda ([[]]) dan penjilidan gabungan menyertakan satu atau beberapa anotasi pengikatan literal string.

Berikut adalah elemen pembantu, yang digunakan dengan kasus penggunaan data binding -

Template Repeater - Sebuah contoh dari konten template dapat dibuat untuk setiap item dalam sebuah array.
Array Selector - Ini memberikan status pemilihan untuk larik data terstruktur.
Conditional Template - Anda dapat mengidentifikasi konten, jika kondisinya benar.
Auto-binding Template - Ini menentukan data yang mengikat di luar elemen polimer.

Pohon DOM memicu peristiwa perubahan dom, jika elemen pembantu memperbarui pohon DOM. Terkadang, Anda dapat berinteraksi dengan DOM dengan mengubah data model, bukan dengan berinteraksi dengan node yang dibuat. Oleh karena itu, Anda dapat menggunakan acara dom-change untuk mengakses node secara langsung.