Advanced

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

Backbone.js — это легковесный JavaScript фреймворк на основе паттерна MVC. Он работает в связке с библиотекой Underscore.js, которая предоставляет широкий диапазон API, специальных хелперов для связывания функций, JavaScript шаблонов и прочего.

Фреймворк работает по принципу MVC, при котором весь код распределяется между классами Model, View и Controller.

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

Преимущества работы с Backbone

MVC подход помогает избежать путаницы в коде
За всю бизнес логику отвечает класс Model. А класс View перерисует интерфейс при любых изменениях в данных. Вам не нужно перебирать всю структуру DOM чтобы найти нужный элемент по его ID или обновлять HTML вручную
Все задачи четко распределяются между соответствующими частями приложения
Поддержка RESTful API

Более детальную информацию о фреймворке вы найдете на его официальной странице.

Основы интеграции

Интеграция Webix-Backbone может происходить на различных уровнях:

Webix компоненты могут загружать данные из коллекций фреймворка. Детали можно узнать в статье Backbone Коллекции
Webix компоненты могут находиться внутри Backbone компонентов. Детали можно узнать в статье Backbone Компоненты
Backbone маршрутизаторы могут управлять видимостью Webix компонентов. Детали можно узнать в статье Backbone Маршрутизаторы.

Пример интеграции

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

<script type="text/javascript" 
    src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./common/underscore.js"></script>
<script type="text/javascript" src="./common/backbone.js"></script>
 
<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" 
    media="screen" charset="utf-8">
<script type="text/javascript" src="../../codebase/webix.js"></script>

Создание компонентов

В гибридном приложении вы можете одновременно использовать компоненты фреймворка и библиотеки.

Backbone компоненты создаются по стандартному шаблону фреймворка:

var cView = Backbone.View.extend({
    tagName: "h2",
    render: function(){
        $(this.el).html("Child View");
    },
});
var v2 = new cView();
v2.render();

Для создания гибридных компонентов используется похожий шаблон. Но здесь у конструктора появляется дополнительное свойство config, в котором хранятся настройки Webix компонентов. Чтобы создать гибридный компонент, необходимо использовать специальный конструктор WebixView:

var ui_config ={
    type: "wide", rows: [
        { template: "top", height: 35 },
        { type: "wide", cols: [ ..cols ..]},
        { template: "bottom", height: 35 }
    ]
};
 
var view  = new WebixView({
    el: ".app1_here", // будет отрисован в div с классом "app1_here"
    config: ui_config
}).render();

Related sample: View

В коде выше показано как создать layout с тремя рядами и столбцами во втором ряде. Эта конструкция будет отрисована в блоке div с классом "app1_here". За отрисовку интерфейса отвечает метод render().

Детали можно узнать в соответствующей статье Backbone Компоненты.

Работа с моделями и коллекциями

FilmRecord = Backbone.Model.extend({});
FilmList = Backbone.Collection.extend({
    model: FilmRecord,
    url: "./common/data.json" // ссылка на коллекцию данных
});

Загрузка коллекции в компонент

Для примера, давайте создадим Webix компонент list:

View: Webix List

$(".app1_here").webix_list({
    id: "mylist", width: 200,
    template: "#title#", select: true
});

Теперь, когда у нас есть готовый компонент и модель данных, мы можем запарсить данные в компонент через метод sync:

// получаем данные
var films = new FilmList();
films.fetch();
 
// синхронизируем коллекцию данных с list 
$$("mylist").sync(films);

Related sample: Loading data from Collection

Код выше отрисует компонент list и заполнит его данными из коллекции "FilmList", которая состоит из моделей "FirmRecord".

Вы можете завершить синхронизацию между компонентом и коллекцией с помощью метода unsync:

$$("mylist").unsync(films);

Заключение

Ниже вы найдете описание других примеров их совместного использования:

Наверх