# 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

- Untuk mengelakkan tetapan pengulangan yang berkaitan dengan penyebaran data menjadi merepotkan, fungsi salin, tampal dan padam disediakan.
- Salin-Tampal: Anda boleh menyalin tetapan penyebaran data bagi tab semasa dan menampalkannya ke dalam tetapan penyebaran data komponen lain.
- Padam: Menghapuskan hanya tetapan tab semasa di antara tetapan penyebaran data komponen.

### 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 sifat komponen sasaran di mana nilai data yang disebarkan akan diterapkan.
- Rujuk [sifat](./data-binding-property.md)

### 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)
```