Интеграция с Meteor

Вы можете использовать библиотеку Webix при разработке на Meteor.

Как использовать Webix вместе с Meteor

Шаг 1. Подключите ресурсы Webix

meteor npm i --save webix
meteor npm i --save webix-meteor-data

Шаг 2. Создайте коллекцию данных

Movies = new Mongo.Collection("movies");

Шаг 3. Инициализируйте Webix компонент

Используйте meteor->{collection} вместо пути к данным:

webix.ui({
  view: "datatable",
  editable: true, editaction: "dblclick",
  autoconfig: true,
  // загружаем данные из коллекции "movies"
  url: "meteor->books",
  // сохраняем данные в коллекцию "movies"
  save: "meteor->books"
})

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

Если свойству save задать коллекцию, то виджет будет сохранять туда все изменения.

Работа с данными

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

Курсор

Movies = new Mongo.Collection("movies");
var cursor = Movies.find();
 
webix.ui({
  view: "list",
  url: webix.proxy("meteor", cursor)
});

Коллекция

Movies = new Mongo.Collection("movies");
 
webix.ui({
  view: "list",
  url:  webix.proxy("meteor", Movies),
  save: webix.proxy("meteor", Movies)
});

Коллекция и Курсор

Movies = new Mongo.Collection("movies");
 
webix.ui({
  view: "list",
  url:  webix.proxy("meteor", Movies.find()),
  save: webix.proxy("meteor", Movies)
});

Динамическая загрузка данных

Метод load позволяет загружать данные в компонент динамически.

$$("datatable").load("meteor->movies");

или

$$("datatable").load(webix.proxy("meteor", Movies.find()) );

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

У Webix компонентов есть метод sync, который позволяет синхронизовать данные с другими компонентами (или коллекциями). Вы можете использовать его при работе с Meteor.

Movies = new Mongo.Collection("movies");
$$("details").sync($$("datatable"));

Наверх