# Data Binding

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

## Data Spread

- This setting changes the properties of the target component based on the data value of the source component.
- If the source component changes the data property of the target component, the Data Spread function of the target component operates continuously, so this function is called data propagation.
- Multiple data propagation settings are possible

### Copy, Paste and Delete

- Because repetitive settings related to data spreading can be cumbersome, copy, paste and delete functions are provided.
- Copy-Paste: You can copy the entire data spreading setting of a component and paste it into the data spreading setting of another component. Caution is required because pasting replaces all data spreading settings of the target component.
- Delete: Deletes only the settings of the current tab among the data spreading settings of the component.

### accessor

- Set when you want to propagate only a part of the data object of the source component or the transformed data.
- The setting method follows [JSONATA document](http://docs.jsonata.org/overview.html).

### target

- Designate the target component for data propagation.
- Targeting based on relationships with the component itself
  - (self) : component itself
- Designated by id: #id
- Designated as class: .class
- Target designation based on data
  - (key): Components with the key value of the data object as the id become target components.
  - [property]: Components that have the property value of the data object as the id become the target component.

### property

- Designates the properties of the target component to which the data value to be propagated is applied.
- If the property value is set to '(action)', it is not applied to any properties of the target component(s). The '(action)' property is mainly used when you want to execute only script actions at the time of data propagation.

### rule

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

- value
  - the value itself is set as the target attribute of the component.
- map
  - mapping the value of the key value is set in the properties of the target component.
- range
  - The mapping value of the range including the value is set in the properties of the target component.
- eval
  - The eval code can be written in JavaScript grammar.
  - The context (this) of the eval code is a source component.
  - The parameter of eval code has value and targets.
    - value: The value to which the accessor is applied to the data of the source component
    - targets: list of target components

### No Data No Spreading

- Data will be spreaded only when the final result value according to the rule type is not an empty value.
  - If the result value is undefined, null, NaN, or blank (''), it will not be spreaded.
  - Otherwise, data will be spreaded, even if the result is the number zero.
