# Data Binding

[Data Binding Introduction](./data-binding.md)

## Data Spread

- Data Spread is a configuration that changes the properties of the target component based on the data value of the source component.
- If the source component changes the data attribute of the target component, the Data Spread feature of the target component works continuously, so this feature is called Data Spread.
- Multiple Data Spread configurations are possible.

### Copy, Paste, and Delete

- To avoid the cumbersome repetitive settings related to data propagation, the functions of copy, paste, and delete are provided.
- Copy-Paste: You can copy the data propagation settings of the current tab and paste them into the data propagation settings of another component.
- Delete: Deletes only the settings of the current tab among the data propagation settings of the component.

### Source Data (source)

- When you specify a source component, it propagates the data of that component to the target component(s).
- Target designation based on component relationships:
  - (self): The component itself.
- Specified by ID: #id
- If not specified, it propagates the data of the component itself as (self).

### Accessor (accessor)

- The configuration method follows the [JSONATA documentation](http://docs.jsonata.org/overview.html).

### Target (target)

- Specifies the target component(s) for data propagation.
- Target designation based on component relationships:
  - (self): The component itself.
- Specified by ID: #id
- Specified by class: .class
- Target designation based on data:
  - (key): Components with IDs corresponding to the key values in the data object become the target components.
  - [property]: Components with IDs corresponding to the values of the data object's property become the target components.

### Property (property)

- Specifies the property of the target component where the propagated data value will be applied.
- See [Property](./data-binding-property.md)

### Rule Type (rule)

Specifies how the propagated data is applied to the properties of the target component.

- Value (value)
  - The value itself is directly set to the properties of the target component.
- Mapping (map)
  - The value is used as a key to look up a mapping value that is then set to the properties of the target component.
- Range (range)
  - A mapping value from a range that includes the value is set to the properties of the target component.
- Function (eval)
  - Eval code can be written in JavaScript syntax.
  - The context (this) of eval code is the source component.
  - The eval code has parameters: value and targets.
    - value: The value with the accessor applied from the source component's data.
    - targets: The list of target components.

### No Data No Spreading

- Data is only propagated if the final result value based on the rule type is not empty.
  - It does not propagate if the result value is undefined, null, NaN, or an empty string ('').
  - It propagates if the result value is the number 0.

### Partial Spreading

Partial Spreading is a useful concept when manipulating objects and copying or modifying their properties.

For example, let's consider a component that manages restaurant menu items. Each component has a 'data' object containing the following information:

```plaintext
Target Component Data (Before Update):
- Name (name)
- Price (price)
- Description (description)
- Calories (calories)
```

We want to update some of the properties of the target component. Here is the update information contained in the source data:

```plaintext
Update Information:
- Price (price)
- Calories (calories)
```

Now, using partial spreading, we can apply only some of the information from the source to update the target component. This way, we can change only the desired properties of the target data using the source data.

As a result, the target component's data will be updated as follows:

```plaintext
Target Component Data (After Update):
- Name (name)
- Price (price, updated value)
- Description (description)
- Calories (calories, updated value)
```