Привязка и синхронизация "невидимых" компонентов

Библиотека Webix содержит несколько невидимых (view-less) компонентов данных. У них нет графического представления и используются они для хранения данных.

У этих коллекций то же самое API, что и у их "видимых" родственников. Например, вы можете привязать или синхронизировать данные с помощью методов bind() и sync(), соответственно.

Использование DataCollection и TreeCollection

DataCollection и TreeCollection не имеют графического представления и используются для загрузки и хранения данных на клиенте. Но они также могут служить источником данных для видимых компонентов (Datatable, List, Tree, Chart и др.).

var data = new webix.DataCollection({
    url:"server/some_data"
});
 
$$('list').sync(data);
$$("datatable").sync(data);

Любые изменения в коллекции-мастере будут отражены в зависимом компоненте. Только обновления зависимого компонента будут отражены в мастере. Именно поэтому добавлять или удалять данные нужно напрямую из коллекции-мастера.

Обратите внимание, что sync() и parse(), вызванные с целью получения данных из DataCollection или TreeCollection синхронизируют компонент с коллекцией:

$$("slave").parse(someDataCollection);
// или (результат один и тот же)
$$("slave").sync(someDataCollection);

Привязка формы к коллекции данных

Помимо привязки формы к видимому компоненту, вы можете привязать её к коллекции данных:

$$("form1").bind(data);

Существует одно различие от привязки к компоненту данных. Вам необходимо установить курсор на элемент. Вызовите метод setCursor() с ID элемента в качестве параметра:

$$('list').attachEvent("onAfterSelect", function(id){
    data.setCursor(id);
});

Related sample:  DataCollection Synching

Более подробную информацию о курсоре читайте здесь.

Одновременные операции внутри синхронизированных компонентов

Если два и более компонентов синхронизированы с одним источником данных (видимым компонентом данных или DataCollection), хорошей практикой считается также синхронизировать операции пользователя.

Например, если элемент выбран в одном из компонентов, тот же элемент должен быть выбран и в другом. Этого легко достичь с помощью API.

Предположим, у нас есть dataview и datatable, которые синхронизированы с одной коллекцией данных.

var data = new webix.DataCollection({
    url:"../my_data.json" // загружает данные из внешнего файла
});
 
$$("dataview_1").sync(data);
$$("datatable_1").sync(data);

Когда пользователь выбирает элемент в каком-либо компоненте, срабатывает событие onAfterSelect. Вы можете обработать это событие и выбрать тот же элемент в другом компоненте. Функция-обработчик принимает ID выбранного элемента в качестве параметра:

$$("dataview_1").attachEvent("onAfterSelect", function(id){
    $$("datatable_1").select(id);
}); // ID элемента в dataview совпадает с ID элемента в ряду таблицы
 
$$("datatable_1").attachEvent("onAfterSelect", function(id){
    $$("dataview_1").select(id.row);
}); // ID элемента таблицы совпадает с ID элемента в dataview
 
<a href='https://snippet.webix.com/6b9b1507' target='blank'><span class='sample'>Related sample: </span>&nbsp;Data Binding</a>
 
## Серверная интеграция с "невидимыми" компонентами
 
DataCollection может общаться с сервером для загрузки и сохранения данных. Синхронизированные компоненты будут показывать данные, позволяя редактировать их и производить прочие действия.
 
1\. Определите **DataCollection** и передайте в неё данные из базы:
 
~~~js
var store = new webix.DataCollection({
    url:"server/data"
});

2. Объявите DataProcessor для DataCollection:

var dp = new webix.DataProcessor({
    master: store,
    url: "server/data"
});

Вы также можете задать DataProcessor неявно с помощью свойства коллекции save:

store = new webix.DataCollection({
    url:"server/data",
    save:"server/data"
});

3. Синхронизируйте компонент данных с DataCollection:

list.sync(store);

Related sample:  Data Syncing with DataCollection

Читайте подробнее о загрузке и сохранении данных на сервере.

Наверх