Backbone Коллекции

У Webix компонентов есть собственная логика для загрузки и сохранения данных. Но вы также можете загружать данные из Backbone коллекций и управлять ими через API фреймворка.

Загрузка данных

Сначала мы создаем коллекцию и загружаем в нее данные:

var FilmRecord = Backbone.Model.extend({});
var FilmList = Backbone.Collection.extend({
    model: FilmRecord,
    url: "./common/data.json"
});
 
var films = new FilmList();
films.fetch(); // получаем коллекцию данных

У каждого компонента данных есть метод sync, который позволяет получить данные из коллекции фреймворка.

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

Передача данных напрямую в компонент

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

Related sample: Loading data from Collection

Передача данных дочернему компоненту

 
var MyView = WebixView.extend({
    config:{ // конфигурация компонента list
        view: "list", 
        id: "mylist", 
        width: 200,
        template: "#title#", 
        select: true 
    },
    afterRender: function(){
        // синхронизация после рендеринга
        this.getChild("mylist").sync(this.options.collection); 
    }
});
 
new MyView({
    el: ".app1_here",
    collection: films // передача данных через опцию конструктора
}).render();

Related sample: Views and Models

После выполнения метода sync, компонент list будет реагировать на любые изменения в коллекции "films". А любые операции с list ( добавление, удаление или редактирование ) незамедлительно отразятся на коллекции.

Сохранение данных

Стоит учитывать, что изменения в компоненте не будут сохраняться в коллекции автоматически. Для этого вам нужно обработать определенные Webix события и настроить сохранение данных вручную:

• webix:add & webix:change - срабатывают при добавлении или обновлении элемента (здесь list)
• webix:remove - срабатывает при удалении элемента.

// films — это Backbone коллекция с моделью FilmRecord
// без разделителей между событиями!
films.on("webix:add webix:change", function(model){  
    model.save();
});
 
films.on("webix:remove", function(model){
    model.destroy();
});

Related sample: Saving data from collection

Загрузка данных в форму

Не все Webix компоненты позволяют работать с Backbone коллекциями напрямую.
У некоторых компонентов другая модель работы с данными. У них нет метода sync(), поэтому для загрузки данных в такие компоненты предусмотрен метод parse():

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

Код выше парсит данные из модели (films) в form, но любые изменения в компоненте или коллекции не будут отражаться на этих сущностях (в том числе и сохранение).

Добавление новых методов в коллекцию

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

FilmRecord = Backbone.Model.extend({}); 
 
FilmList = Backbone.Collection.extend({
    // основные свойства
    model: FilmRecord,
    url: "./common/data.json",
 
    // определяем кастомные методы
    addSample: function(){
        this.add(new FilmRecord({ // добавляет новую запись
            title: "New Record"
        }));
    },
    deleteFirst: function(){ // удаляет первую запись
        this.remove(this.first().cid);
    }
});

В примере ниже показано как применить вышеописанные функции в интерфейсе приложения:

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

Related sample: Saving data from collection

Наверх