# データバインディング

[データバインディングの紹介](./data-binding.md)

## データスプレッド

- データスプレッドは、ソースコンポーネントのデータ値を基に、ターゲットコンポーネントのプロパティを変更する構成です。
- ソースコンポーネントがターゲットコンポーネントのデータ属性を変更する場合、ターゲットコンポーネントのデータスプレッド機能が連続して動作するため、この機能をデータスプレッドと呼びます。
- 複数のデータスプレッド構成が可能です。

### コピー、ペースト、および削除

- データ伝播に関連する繰り返し設定が面倒になる可能性があるため、コピー、貼り付け、削除の機能を提供します。
- コピー-貼り付け：現在のタブのデータ伝播設定をコピーし、他のコンポーネントのデータ伝播設定に貼り付けることができます。
- 削除：コンポーネントのデータ伝播設定の中で現在のタブの設定のみを削除します。

### ソースデータ（source）

- ソースコンポーネントを指定すると、そのコンポーネントのデータをターゲットコンポーネント（複数可）に伝播します。
- コンポーネントの関係に基づくターゲット指定：
  - (self)：コンポーネント自体。
- ID で指定：#id
- 指定しない場合、(self)と同様にコンポーネント自体のデータを伝播します。

### アクセサ（accessor）

- 構成方法は[JSONATA ドキュメント](http://docs.jsonata.org/overview.html)に従います。

### ターゲット（target）

- データ伝播のターゲットコンポーネントを指定します。
- コンポーネント関係に基づくターゲット指定：
  - (self)：コンポーネント自体。
- ID で指定：#id
- クラスで指定：.class
- データに基づくターゲット指定：
  - (key)：データオブジェクトのキー値に対応する ID を持つコンポーネントがターゲットコンポーネントになります。
  - [property]：データオブジェクトのプロパティ値に対応する ID を持つコンポーネントがターゲットコンポーネントになります。

### プロパティ（property）

- 伝播されるデータ値が適用される対象コンポーネントの属性を指定する。
- [属性](./data-binding-property.md) 参照

### ルールタイプ（rule）

伝播されるデータがターゲットコンポーネントのプロパティに適用される方法を指定します。

- 値（value）
  - 値自体がターゲットコンポーネントのプロパティに直接設定されます。
- マップ（map）
  - 値をキーとしてマッピング値を検索し、それをターゲットコンポーネントのプロパティに設定します。
- レンジ（range）
  - 値が範囲内にあるマッピング値をターゲットコンポーネントのプロパティに設定します。
- 関数（eval）
  - Eval コードは JavaScript 構文で記述できます。
  - Eval コードのコンテキスト（this）はソースコンポーネントです。
  - Eval コードには value と targets というパラメータがあります。
    - value：ソースコンポーネントのデータに適用されるアクセサの値です。
    - targets：ターゲットコンポーネントのリストです。

### データがない場合、伝播しない

- ルールに基づく結果値が空でない場合にのみ伝播します。
  - 結果値が undefined、null、NaN、空白('')の場合、伝播しません。
  - 結果値が数値 0 の場合は伝播します。

### 部分スプレッディング

部分スプレッディング（Partial Spreading）は、オブジェクトを操作し、そのプロパティをコピーまたは変更する際に役立つ概念です。

例えば、レストランのメニューアイテムを管理するコンポーネントを考えてみましょう。各コンポーネントは以下の情報を含む 'data' オブジェクトを持っています：

```plaintext
ターゲットコンポーネントデータ（更新前）：
- 名前（name）
- 価格（price）
- 説明（description）
- カロリー（calories）
```

私たちはターゲットコンポーネントのいくつかのプロパティを更新したいとします。以下はソースデータに含まれる更新情報です：

```plaintext
更新情報：
- 価格（price）
- カロリー（calories）
```

今、部分スプレッディングを使用して、ターゲットコンポーネントにソースデータから必要な情報のみを適用することができます。これにより、ターゲットデータの所望のプロパティのみを変更できます。

その結果、ターゲットコンポーネントのデータは以下のように更新されます：

```plaintext
ターゲットコンポーネントデータ（更新後）：
- 名前（name）
- 価格（price、更新された値）
- 説明（description）
- カロリー（calories、更新された値）
```