Data Binding and Syncing

When you have multiple related views (components) on the page, you can bind them together or sync their data, so that any changes in one of the views would trigger changes in the bound/synced ones. The main component is called master, while the bound one is a slave. The master view appears to be the data source for the slave one.

There are 2 main ways to link data:

• when data in the master component is changed, the slave control gets new data; // syncing
• when selection in the master component is changed - the slave control gets new data. // binding

In both cases, based on configuration

• the slave can take new data from the master component;
• the slave can take new data from the server side.

Binding and Syncing - Difference

When you bind data to any component, it means that when you select an item from one component, this item will be the data source for another component. Most typically, binding is used with some data-presenting component and a form / htmlform.

When you sync data, it means that all changes in the datastore of one component (such as filtering, sorting, etc.) are reflected in the other component at once.

Data Binding

Data binding is implemented with the help of the bind function, that is called from the slave component and has a master component as a parameter.

$$("htmlform1").bind($$("list1"));

In this case, selection of any list item will result in the form filling with data from the list. Be careful to specify the name property for input fields in the form/htmlform. Its values must coincide with the template items of the master component (in case of datatable look at column IDs):

• component template item = field name in a form;
• datatable column ID = field name in a form.

Changes in the slave component will affect the master one, which means that if you edit the info in the form and then save it (click the Submit button), the list item will have this new data.

$$("htmlform1").save();

Related sample:  Binding to a Native HTML Form

A slave can also be unbound from the master by the opposite method:

$$("htmlform1").unbind();

From now on, list changes cannot affect form data and vice versa.

Adding data to master collection

When no item is selected in the master component (here:list), data from the slave one can still be pushed to it.

In other words, if you call the save() method for the bound form when no item is selected in the master, a new item will be added to master collection.

The only thing you should do is remove selection in the master:

$$("list1").unselectAll();
//or
$$("list1").setCursor(null);

Related sample:  Binding to List

Advanced Binding

Data binding features a lot more advanced options to explore:

• it is subject to customization with the help of additional parameters;
• it is suitable for binding hierarchical structures;
• it features event system;
• it has a native API to set default data for cases when no record is selected in the master control;
• it utilizes cursor concept to bind to an invisible DataCollection;
• and a lot more..

Study the corresponding article for details.

Syncing Data of Two Components

Data syncing allows making a full or partial copy of data from one data-presenting component and pass it to the other one. Any change in the master component results in the same change in the slave one.

There can be more than one slave component. In this case, all slaves change simultaneously on master component change.

Full Syncing:

The datasets of the two components are absolutely identical.

$$("slave_component").data.sync("master_component");

Partial (Filter-Based) Syncing

A slave view shows only the data items that comply to a certain criterion defined by the function. Here only the films shot after 1994 will be shown.

$$("dview2").data.sync($$("listA"), function(){
        this.filter(function(data){
        return data.year > 1994;
    });
});

Unsyncing

If the syncing functionality is no longer needed, you can call the unsync command for the component that was previously synced with another one:

$$("dview2").data.unsync();

Related into on data filtering.

Simultaneous Operations within Synced Components

In case of two and more components synced to one data source (either a visible component or non-visible dataCollection), it seems nice to synchronize user operations as well.

For instance, if an item is selected in one of components, the same item should be selected in the synced one. This is easily done using the API.

Let's assume that we have a dataview and datatable both synced with the same dataCollection.

var data = new webix.DataCollection({
    url:"../my_data.json" //load data from an external file
}); 
 
$$("dataview_1").sync(data); 
$$("datatable_1").sync(data);

The event system for selection offers the onAfterSelect event. The function that is fired on this event takes the ID of selected item as a parameter:

$$("dataview_1").attachEvent("onAfterSelect", function(id){
    $$("datatable_1").select(id); 
}); //item ID of dataview coincides with that of datatable  row
 
$$("datatable_1").attachEvent("onAfterSelect", function(id){
    $$("dataview_1").select(id.row);
}); //item ID of datatable row coincides with that of dataview item

Related sample:  Data Binding

Data Binding and Syncing with Non-UI objects

One-Time Syncing

One-time syncing allows synchronizing the data of two components (one of them can be DataCollection) at a chosen time of the application flow without tracking data changes afterwards.

Such syncing presupposes populating one component with the data of another one and is done with the importData method:

$$("listB").data.importData($$("listA"));

Note that it's a DataStore method, so it should be called for the data of the component.

Back to top