# Pemautan Data

[Pengenalan Pemautan Data](./data-binding.md)

## Penyebaran Data

- Pemautan data adalah konfigurasi yang mengubah atribut komponen target berdasarkan nilai data komponen sumber.
- Jika komponen sumber mengubah atribut data komponen target, maka fitur Penyebaran Data komponen target akan beroperasi secara berurutan, sehingga kita menyebutnya sebagai Penyebaran Data.
- Beberapa konfigurasi Penyebaran Data dapat dilakukan.

### Menyalin, Menyisipkan, dan Menghapus

- Karena konfigurasi Penyebaran Data yang berulang dapat menjadi rumit, fitur Menyalin, Menyisipkan, dan Menghapus disediakan.
- Salin-Tempel: Anda dapat menyalin seluruh konfigurasi Penyebaran Data komponen dan menempelkannya ke konfigurasi Penyebaran Data komponen lain. Namun, perlu berhati-hati karena operasi ini akan menggantikan seluruh konfigurasi Penyebaran Data komponen target.
- Hapus: Hanya menghapus konfigurasi Penyebaran Data pada tab saat ini.

### Data Sumber (source)

- Ketika komponen sumber ditentukan, data komponen tersebut akan disebarkan ke komponen target (atau beberapa komponen).
- Penentuan target berdasarkan hubungan komponen:
  - (self): Komponen itu sendiri.
- Ditentukan dengan ID: #id
- Jika tidak ditentukan, data komponen sendiri akan disebarkan, seperti (self).

### Aksesori (accessor)

- Cara konfigurasi mengikuti [Dokumen JSONATA](http://docs.jsonata.org/overview.html).

### Target

- Menentukan komponen target untuk Penyebaran Data.
- Menentukan target berdasarkan hubungan komponen:
  - (self): Komponen itu sendiri.
- Ditentukan dengan ID: #id
- Ditentukan dengan kelas: .class
- Menentukan target berdasarkan data:
  - (key): Komponen dengan ID yang sesuai dengan kunci objek data akan menjadi komponen target.
  - [property]: Komponen dengan ID yang sesuai dengan nilai properti objek data akan menjadi komponen target.

### Properti

- Menentukan properti komponen target tempat nilai data yang akan disebar diterapkan.
- Jika nilai properti disetel ke '(action)', maka nilai tidak akan diterapkan ke properti komponen target mana pun. Properti '(action)' biasanya digunakan ketika Anda hanya ingin menjalankan skrip pada saat Penyebaran Data.

### Jenis Aturan (rule)

- Menentukan bagaimana data yang disebarkan akan diterapkan pada properti komponen target.
- Nilai (value)
  - Nilai itu sendiri akan diatur secara langsung pada properti komponen target.
- Pemetaan (map)
  - Nilai akan digunakan sebagai kunci untuk mencari nilai pemetaan pada properti komponen target.
- Rentang (range)
  - Nilai yang termasuk dalam rentang akan diatur pada properti komponen target.
- Fungsi (eval)
  - Kode eval dapat ditulis dalam sintaks JavaScript.
  - Konteks kode eval (this) adalah komponen sumber.
  - Kode eval memiliki parameter value dan targets.
    - value: Nilai yang diterapkan pada data komponen sumber dengan aksesori.
    - targets: Daftar komponen target.

### Tidak Ada Data, Tidak Ada Penyebaran

- Penyebaran hanya terjadi jika hasil berdasarkan aturan bukan nilai kosong.
  - Jika hasil adalah undefined, null, NaN, atau string kosong (''), tidak akan ada penyebaran.
  - Jika hasil adalah angka 0, akan ada penyebaran.

### Penyebaran Separa

Penyebaran Separa (Partial Spreading) adalah konsep yang berguna apabila memanipulasi objek dan menyalin atau mengubah propertinya.

Sebagai contoh, mari pertimbangkan komponen yang mengurus item-menu restoran. Setiap komponen memiliki objek 'data' yang berisi maklumat berikut:

```plaintext
Data Komponen Sasaran (Sebelum Kemas kini):
- Nama (name)
- Harga (price)
- Penerangan (description)
- Kalori (calories)
```

Kita ingin mengemas kini beberapa properti komponen sasaran. Berikut adalah maklumat kemas kini yang terkandung dalam data sumber:

```plaintext
Maklumat Kemas kini:
- Harga (price)
- Kalori (calories)
```

Sekarang, menggunakan penyebaran separa, kita dapat menggunapakai hanya sebahagian maklumat dari sumber untuk mengemas kini komponen sasaran. Dengan cara ini, kita boleh mengubah hanya properti yang diinginkan dari data sasaran menggunakan data sumber.

Akibatnya, data komponen sasaran akan dikemas kini seperti berikut:

```plaintext
Data Komponen Sasaran (Selepas Kemas kini):
- Nama (name)
- Harga (price, nilai yang dikemas kini)
- Penerangan (description)
- Kalori (calories, nilai yang dikemas kini)
```
