Backbone Маршрутизаторы

Давайте представим, что у вас есть компоненты list и template. При клике по любому из элементов списка (list), вам нужно показать его детальную информацию в шаблоне (template). А при клике по кнопке внутри шаблона — вернуться обратно к списку.
И в зависимости от того, как вы инициализируете эти компоненты, для реализации задуманого будут применяться разные шаблоны:

• Backbone Маршрутизаторы для Webix компонентов
• Backbone Маршрутизаторы для Гибридных компонентов
• Backbone Маршрутизаторы для Секций лейаута

Backbone Маршрутизаторы для Webix компонентов

Webix лейаут можно создать следующим образом:

webix.ui({
  container: "app1_here", rows: [
     { template: "Click on item", type: "header" },
     { cells: [
       { view: "list", url: "data.json", 
            template: "#title#", select: true, id: "mylist" },
       { template: "<button onclick='history.back()'>Back</button>", 
            id: "details" }
    ]}
  ]
});

А теперь давайте создадим Backbone Маршрутизатор:

var routes = new (Backbone.Router.extend({
    routes: {
        "": "index", 
        "films/:id":"details" // вызываем функцию details() 
    },
    details: function(id){
        $$("details").show(); // показываем template с описанием фильма
    },
    index: function(){
        $$("mylist").show();
    }
}));

Как вы видите, маршрутизатор показывает компоненты на основе сегментов URL текущей страницы. После переключения на шаблон "details", приложение получает новый URL localhost/myapp.html#films/id, последний сегмент которого отображает ID выбранного элемента списка.

Для полноценной работы приложения, нам нужно прописать еще несколько строк кода:

$$("mylist").attachEvent("onAfterSelect", function(id){ //правило навигации
    routes.navigate("films/"+id, { trigger:true }); 
});
Backbone.history.start(); // маршрутизатор начинает запоминать навигацию

Related sample: Routes.The Webix way

Код выше определяет правило навигации сразу после выбора элемента списка и запускает маршрутизатор. А шаблон, в свою очередь, использует уже существующий маршрутизатор и делает шаг назад при клике по кнопке внутри блока.

Backbone Маршрутизаторы для Гибридных компонентов

А теперь давайте создадим такое же приложение, но с использованием гибридных Backbone-Webix компонентов.

var layout = new WebixView({
    el: "#app1_here",
    config: {
        rows: [
            { template: "Click on item", type: "header" },
            {
                view: "list", url: "common/data.json",
                template: "#title#", select: true,
                id: "mylist"
            }
        ]
    }
});
 
var DView = Backbone.View.extend({
    el: "#app1_here", // такой же контейнер как и в коде выше
    tagName: "div",
    render: function(){
        $(this.el).html("<button onclick='history.back()'>Back</button>");
    },
});
var template = new DView();

А маршрутизатор будет немного отличаться:

var routes = new (Backbone.Router.extend({
    routes: {
        "": "index", 
        "films/:id": "details" // вызываем функцию details()
    },
    details: function(id){
        template.render(); // отрисовываем шаблон в его "el" контейнере
    },
    index: function(){
        layout.render(); // заново отрисовываем лейаут
        // устанавливаем правило навигации 
        $$("mylist").attachEvent("onAfterSelect", function(id){
            routes.navigate("films/"+id, { trigger: true });
        });
    }
}));

Related sample: Routes.The Backbone way

Вместо переключения между Webix компонентами в лейауте, здесь мы каждый раз отрисовываем нужный Backbone компонент в одном и том же контейнере, в зависимости от текущего состояния. А поведение остается прежним.

Но маршрутизатор должен запускаться отдельно, после инициализации приложения:

// инициализация приложения
Backbone.history.start();

Обновление секции лейаута

При работе с Webix компонентами мы можем обновлять как родительский компонент, так и его дочерние компоненты (отдельные части layout).

Давайте создадим 3 отдельных компонента:

• layout (корневой компонент)
• list (список элементов)
• template (блок с кнопкой).

Компоненты list и template будут показаны в лейауте с помощью маршрутизатора:

var template = new WebixView({
    config: { template:"<button onclick='history.back()'>Back</button>" }
});
var list = new WebixView({
    config: {
        view: "list", url: "common/data.json",
        template: "#title#", select: true,
        id: "mylist"
    }
});
// лейаут с конфигурацией
var layout = new WebixView({
    el: "#app1_here",
    config: {
        rows: [
            { template: "Click on item", type: "header" },
            { }
        ]
    }
});

А маршрутизатор будет таким:

var routes = new (Backbone.Router.extend({
    routes: {
        "": "index", 
        "films/:id": "details"
    },
    details: function(id){
        // определяем контейнер для template 
        template.el = layout.root.getChildViews()[1]; 
        template.render();
    },
    index:function(){
        // определяем контейнер для list 
        list.el = layout.root.getChildViews()[1];
        list.render();
        $$("mylist").attachEvent("onAfterSelect", function(id){
            routes.navigate("films/"+id, { trigger: true });
        });
    }
}));

Маршрутизатор находит ячейку в лейауте и отрисовывает в ней необходимый компонент.

Related sample: Routes.Changing the Webix Layout

Наверх