Have you ever faced a situation where different form controls create different data, and reading and writing data to from these form controls need to be controlled using messy scripts?
It is common, group of radio buttons creating array data, checkbox creates true/false on/off Y/N different values, and single select creates single string data, while a multi-select creates array data.
Wouldn't it be nice if all form controls accepted and produced same format of data. If you agree please read on.
The basis of this Datasource form controls is same format of data structure is produced and consumed by every form control. This makes reading and writing data process common across controls. Controls can be easily added and removed from forms. Even there can be fair amount of backend code which can be common.
Second comes datasources. The datasource is form control agnostic. Means it will create data in a format which can be linked to a form without having to worry what form control is being used to visualize the data. The form with all the controls can be serialized into a data format which is same as the datasource format.
The same datasource can be plugged into a datagrid view which may contain pagination or a simple table. This data grid can be easily modified to create updatatable rows of dataNote: This is not a one-way or two-way data binding library like angularjs or knockout or backbone models. Data needs to be read manually and written manually from/to the datasource.
Data binding is not a problem to implement, in fact one-way data binding should be very trivial to implement since we already have included observable models. If you want to implement data binding you will need to make entire datasource observable, and then in the event handler call `setValue` to all the form controls. However nice effect can be achieved by attaching a datasource with multiple forms. Updating all forms setValue() will result in same data appear in multiple places. We have not implemented data updating automatically, but infrastructure is there to implement one-way data binding. To avoid too many events on a page this was chosen design.
The library is basically a wrapper around any ui library of your choice. Here in most places we have used jQuery-ui, but you can mix different libraries and create a wrapper which uses the compliant our interchange format. Details of structure of widget can be seen in Form Controls Widget
As you might have guessed that there will be huge amount of DOM manipulation when we do form view updates. This would have been a major concern if every model update would create a cascade of form updates. But in general there are very few user triggered updates. Some might argue this is prehistoric framework as compared to angularjs or reactjs. But in reality this is very small and very lightweight for browsers.