Meteor Integration

The Webix library allows using Webix components with the Meteor framework.

The sources for integration of Webix with Meteor are not included into the Webix library package. You can take them from the GitHub repository

How to use Webix with Meteor

Step 1. Add the Webix Package

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

Step 2. Define Data Collections as Usual:

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

Step 3. Initialize Webix Components

Using meteor->{collection} as the data URL:

webix.ui({
  view: "datatable",
  editable: true, editaction: "dblclick",
  autoconfig: true,
  // load data from the "movies" collection
  url: "meteor->books",
  // save data to the "movies" collection
  save: "meteor->books"
})

Adding the url property will enable data loading and automatic component updates when data changes in the specified Collection.

The save property ensures that all changes in the component will be saved back to the Collection.

Using Cursors

Instead of using a string for the url property, you can use cursors and collections directly.

Cursor

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

Collection

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

Mixing Cursors and Collections

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

Dynamic Data Loading

You can use the load method to (re)load data in the component.

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

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

Sync API

Webix components have the sync method to synchronize data between components. The method can be used with Meteor.

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