Binder syncs the data between an HTMLElement and an Object.
Enter the following code in
Now enter this in
div have the same
data attribute, they are synced. Any changes made in the input field will be reflected in the div section. Furthermore, the content of the
<div> section can be retrieved and used anywhere by using
this.data.name in the component's JS file.
Binder Plugin allows you to write your own custom plugins.
Before creating your own plugin, read below workflow of binder to have a perfect understanding of how it works.
Binder has basically getter and setter method.
- Getter method is always used to listen for user input in any form of HTMLElement and push those data to a respective object.
- Setter method is always used to set the data of object towards any HTMLElement. If a value is set to an object key, those values will reflect the HTMLElement.
You can write getter and setter methods in '< component >-config.js'.
Getter and Setter example:
There is a priority to executing all plugins. Plugin which matches at first will executes and the rest won't.
It is possible exclude default plugins and write your own.
Import default plugins and add it in 'excludePlugins' array.