Backbone Collections

While Webix components have their own logic to load and save data, you can also use Backbone Collection as data source, and handle loading and saving in a Backbone way.

Data Loading

First, we need to create a Backbone collection and add data to it:

FilmRecord = Backbone.Model.extend({});
FilmList = Backbone.Collection.extend({
    model: FilmRecord,
    url:"./common/data.json"
});
 
films = new FilmList();
films.fetch(); //getting collection data

Each data component has the sync method that can be used to load data from a Backbone Collection.

There can be several methods to add data from a Backbone collection to a Webix view. It depends on how you initialize the view.

By direct rendering into the needed node

var list = $(".app1_here").webix_list({
    template:"#title#", select:true
});
 
list.sync(films);

Related sample: Loading data from Collection

By creating a Backbone view that houses this component

MyView = WebixView.extend({
    config:{ 
        view:"list", //Webix list config
        id:"mylist", 
        width:200,
        template:"#title#", 
        select:true 
    },
    afterRender:function(){
        this.getChild("mylist").sync(this.options.collection); // syncing after rendering
    }
});
 
new MyView({
    el: ".app1_here",
    collection: films //defining collection as view option
}).render();

Related sample: Views and Models

After executing the sync command any changes to the "films" collection will be reflected in the list. Also, any changes, done by list API (adding, deleting, editing) will be reflected in a Backbone collection as well.

Data Saving

Nevertheless, changes in the component don't trigger saving to the Backbone Collection on their own. You need to use additional Webix events that are handled to enable data saving:

webix:add & webix:change - fire when a new item is added or an item is updated in the view (here:list)
webix:remove - fires when a record is removed from the view.

//films is Backbone collection with FilmRecord model
films.on("webix:add webix:change", function(model){ //no delimiter between events! 
    model.save();
});
films.on("webix:remove", function(model){
    model.destroy();
});

Related sample: Saving data from collection

Loading data in Form

Not all Webix components can work with Backbone Collections directly. Some components do not have the sync() method, so instead of it you can use the parse method to load data to them:

$$("form").parse(films.first().toJSON());

This command loads data from the model into Webix form, but any changes in the form or in the model are not reflected or saved.

Adding Extra Methods to Collections

Backbone collection can be extended to have as many methods as you need. These are test methods that change collection data:

FilmRecord = Backbone.Model.extend({}); 
 
FilmList = Backbone.Collection.extend({
    //basic properties
    model: FilmRecord,
    url:"./common/data.json",
 
    //necessary for test buttons only
    addSample:function(){
        this.add(new FilmRecord({ //adds new record to collection
            title:"New Record"
        }));
    },
    deleteFirst:function(){ //removes first record from collection
        this.remove(this.first().cid);
    }
});

This is how these functions are triggered in the app:

<input type="button" value="Add" onclick='films.addSample()'>
<input type="button" value="Delete first" onclick='films.deleteFirst()'>

Related sample: Saving data from collection