When you have multiple related views (components) on the page you can bind them together or sync their data in order that any changes in one of the views would trigger changes in the bound/synced ones. The main component is called a master one while the bound one is a slave. Master view appears to be the datasource for the slave one.
There are 2 main ways to link data:
In both cases, based on configuration
When you bind data to any component it means that when you select an item from one component, this item will be the datasource for another component. Most typically, binding is used with some data-presenting component and a form / htmlform.
When you sync data, it means that the whole visible data from one component is at once copied to the other.
Data binding is implemented with the help of the bind function that is called from the slave component and has a master component as 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 name property for input fields in the form/htmlform. Its values must coincide with template items of the master component (in case of datatable look at column ID-s):
Changes in the slave component will affect master one, which means that if you edit the info in the form, then save it (click sumbit button), the list item will have this new data.
$$("htmlform1").save();
Related sample: Binding to a native HTML form
Slave can as well 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 a master component (here:list), data in the slave one can still be pushed to it.
In other words, if you call 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 to remove selection in the master:
$$("list1").unselectAll();
//or
$$("list1").setCursor(null);
Related sample: Binding to List
Data binding features a lot more advanced options to explore:
Study the corresponding article for details.
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.
Note that this functionality works with components datastores, that's why data property is used everywhere.
The datasets of the two components are absolutely identical.
$$('slave_component').data.sync('master_component');
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;
});
});
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.
In case of two and more component synced to one datasource (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 programmatically.
Take for instance we have a dataview and datatable, both synched 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 offer the onAfterSelect event. The function that is fired on this event takes the ID of selected item as 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
Data Binding and Syncing with Non-UI objects
One-time syncing allows for 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 importData method:
$$("listB").data.importData($$("listA"));
Note that it's a DataStore method, so it should be called for component data.
Back to top