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

Вы можете использовать Webix компоненты в связке с FireBase.

Ресурсы для интеграции Webix и FireBase не входят в стандартный пакет библиотеки. Вы можете найти их в этом GitHub репозитории.

Примечание о работе с Firebase

В соответствии с официальной информацией:

При изменении данных в базе, они автоматически обновляются во всех приложениях (на любых устройствах), построенных на основе Firebase.

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

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

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

<!-- Webix -->
<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">
<!-- Webix-Firebase adapter -->
<script type="text/javascript" src="../codebase/webix-firebase.js"></script>
<!-- FireBase -->
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-database.js"></script>

Шаг 2. Создайте соединение с FireBase

firebase.initializeApp({
  databaseURL: "https://webix-demo.firebaseio.com/"
});
 
// создаем соединение с FireBase и подключаем его к Webix
webix.firebase = firebase.database();

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

Используйте firebase->{reference} как путь к данным

webix.ui({
    id:"dtable",
    view:"datatable",
    editable:true, editaction:"dblclick",
    columns:[{
        id:"name", editor:"text", fillspace:1
    },{
        id:"author", editor:"text", fillspace:1
    }],
 
  // загружаем данные из /books
    url: "firebase->books",
    // сохраняем данные в /books
    save:"firebase->books"
})

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

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

FireBase пути

Вместо обычного URL, вы можете указывать специальные FireBase пути:

firebase.initializeApp({
    databaseURL: "https://webix-demo.firebaseio.com/"
});
var db = firebase.database();
var proxy = webix.proxy("firebase", db.ref("books"));
 
webix.ui({
    view:"list",
    url: proxy,
    save: proxy
})

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

Для загрузки данных в компонент вы можете использовать метод load():

$$("dtable").load("firebase->books");

или

$$("dtable").load( webix.proxy("firebase", ref));

API для синхронизации данных

У Webix компонентов есть специальный метод sync, который позволяет связывать данные нескольких компонентов. Его можно использовать и для работы с Firebase:

firebase.initializeApp({
    databaseURL: "https://webix-demo.firebaseio.com/"
});
webix.firebase = firebase.database();
var ref = webix.firebase.ref("books");
 
$$("dtable").sync(ref);

Работа с Form и Template

При работе с формами вы также можете использовать API для загрузки и сохранения данных:

// form
$$("form").load("books/4");
// ...
$$("form").save();
 
// template
$$("template").load("books/4")

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

var data = new webix.DataCollection({
    url:"firebase->books",
    save:"firebase->books"
})
form.bind(data);
data.waitData.then(function(){
  // для передачи данных из коллекции в форму используйте метод setCursor 
    data.setCursor("4");
})

по такому же принципу связывание работает и для datatable:

webix.ui({
    view:"datatable", autoConfig:true, id:"d1", select:true,
    url:"firebase->books",
    save:"firebase->books"
});
form.bind("d1"); // данные выбранного ряда будут отображаться в форме

Примеры

С другими примерами интеграции можно ознакомиться в этом GitHub репозитории.

Наверх