Синхронизация данных

Синхронизация позволяет связать данные нескольких компонентов. При синхронизации один из компонентов служит мастером для других зависимых компонентов. Данные из мастера копируются и передаются зависимому компоненту. Все изменения данных в мастере (добавление, обновление, удаление, фильтрация, сортировка) отражаются и в зависимом компоненте.

Базовые принципы

Синхронизация компонентов

Чтобы синхронизировать данные компонентов, необходимо вызвать метод sync у зависимого компонента или его DataStore, передав мастер в качестве параметра.

$$("list1").sync("datatable1");
// или
$$("list1").data.sync("datatable1");

Обратите внимание, что и метод sync(), и метод parse() синхронизируют компоненты:

$$("list1").sync("datatable1");
// или
$$("list1").parse("datatable1");

Отмена синхронизации

Если синхронизация компонентов вам больше не нужна, вызовите метод unsync у DataStore зависимого компонента:

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

Операции с данными

Когда компоненты синхронизированы, любая операция в мастере отражается в зависимом компоненте. В то же время только обновления данных в зависимом компоненте отражается в мастере.

Поэтому вы можете:

обновлять данные в мастере или зависимом компоненте

$$("зависимый").updateItem("itemId", { new_data:"some data" });
// или
$$("главный").updateItem("itemId", { new_data:"some data" });

добавлять и удалять данные только в мастере

$$("главный").add({ new_data:"some data" });
$$("главный").remove("itemId");

Вы можете добавлять и удалять данные в зависимом компоненте, но в таком случае изменения не будут отражаться в мастере.

Синхронизация с использованием коллбэк-функции

Вы также можете отфильтровать или сгруппировать данные, перед тем как отобразить их в зависимом компоненте. Для этого передайте соответствующую функцию в метод sync вторым параметром.

Фильтрация данных

Пример ниже показывает, как отфильтровать данные с помощью функции. Зависимый компонент отобразит только те фильмы, которые вышли после 1994 года:

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

Подробнее о фильтрации данных читайте в этой статье.

Группировка данных

Вы также можете группировать данные перед их отправкой в зависимый компонент:

$$("chart1").sync($$("treetable1") , function() {
  this.group({
    by:"company",
    map:{
      sales:["sales","sum"]
    }   
  });
});

Подробнее о группировании данных читайте в этой статье.

Синхронизация с хранилищами данных

Вы можете синхронизовать компоненты с хранилищами данных. Такой подход позволяет хранить данные в отдельных коллекциях и отображать их в нужном компоненте при необходимости. Коллекции могут взаимодействовать с сервером, и брать на себя загрузку и сохранение данных.

var data = new webix.DataCollection({
    url: "remote/data"
    save: "rest->//remote/data"
});
 
var treeData = new webix.TreeCollection({
    // коллекции могут хранить и локальные данные
    data: treeData
});
 
$$("list1").sync(data);
$$("tree1").sync(treeData);

Принцип синхронизации с коллекцией не отличается от синхронизации с обычным компонентом. Любые изменения в мастере-коллекции отражаются в зависимом компоненте. Только при обновлении данных в зависимом компоненте, изменения попадут в мастер-коллекцию. Добавлять и удалять данные необходимо в мастер-коллекции.

Для пользователей Webix Jet

Если вы работаете с фреймворком Webix Jet, синхронизация с компонентами стандартным способом недоступна. Компоненты чаще всего находятся в разных файлах, а UI отделён от логики загрузки/сохранения данных. Однако вы можете создать модель данных с помощью DataCollection и импортировать ее в нужные компоненты.

Импорт данных

Импорт позволяет синхронизовать данные двух компонентов (одним из них может быть DataCollection) без дальнейшего отслеживания изменений.

Зависимый компонент заполняется данными мастера через метод importData:

$$("list2").data.importData($$("list1"));

Обратите внимание, что метод вызывается у DataStore, поэтому его необходимо вызывать у поля компонента data.

Метод importData не копирует данные, поэтому изменения в любом из компонентов отображаются только после перерисовки.

Чтобы полностью скопировать данные одного компонента в другой, используйте следующий код:

var copy = webix.copy($$("list1").serialize());
$$("list2").parse(copy));

Наверх