Backbone Компоненты

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

В примере ниже показано как создать новый компонент:

var myview = new WebixView({
   el: ".app1_here",
   config: {
      rows: [
        { template: "ABC" },
        { cols: [...] },
        { view: "some" }
      ]
   }
});

В конструкторе используются следующие поля:

• el - HTML элемент, в котором будет отображаться компонент
• config - объект конфигурации Webix компонента.

Для отображения компонентов предусмотрен метод render():

myview.render();

Related sample: View

Изолированные компоненты

Вы можете изолировать компоненты фреймворка, которые включают несколько Webix компонентов. Такой подход позволяет использовать одинаковые ID в разных Backbone компонентах на одной странице:

var ui_config = {
    isolate: true, rows: [
        { template: "ABC", id: "abc" },
        { cols: [...] },
        { view: "some" }
    ]
};
 
var firstview = new WebixView({
   el: ".app1_here",
   config: ui_config
});
 
var secondview = new WebixView({
   el: ".app2_here",
   config: ui_config
});

Давайте представим, что каждый Backbone компонент содержит template с ID abc. Если в конфигурации этих компонентов есть свойство isolate, вы можете обращаться к необходимым шаблонам через их ID.

Вы можете отрисовать любой Webix компонент напрямую в HTML элемент:

$(".app1_here").webix_list({
    id: "mylist", width: 200, // конфигурация
    template: "#title#", select: true
});

Related sample: Loading data from Collection

Встроенные методы компонента

WebixView — это экземпляр класса Backbone.View.

У компонентов, созданных на основе этого конструктора, есть несколько встроенных методов:

• render() - отрисовывает компонент
• destroy() - разрушает компонент
• getRoot() - получает главный родительский компонент
• getChild(id) - получает дочерний компонент по его ID.

Как вложить HTML элемент в Webix компонент

Вы можете создать темплейт компонента и позже отрисовать в нём backbone компонент как на примере ниже:

// конфигурация webix ui
var ui_config = {
    isolate: true, type: "wide", rows: [
        { template: "top", height: 35 },
        { type: "wide", cols: [
            { template: "left", id: "left" },
            { template: "center", id: "center" },
            { template: "right", id: "right" }
        ]},
        { template: "bottom", height: 35 }
    ]
};
 
// создаем корневой компонент
var v1 = new WebixView({
        config: ui_config,
        el: ".app1_here"
    });
v1.render();
 
// дочерний html элемент
var cView = Backbone.View.extend({
    tagName: "h2",
    render: function(){
        $(this.el).html("Child View");
    },
});
 
// создаем дочерний компонент
var v2 = new cView();
v2.render();
v1.getChild("left").setContent(v2.el);

• метод getChild() получает дочерний элемент с ID "left"
• метод setContent(content) привязывает Backbone компонент к шаблону.

Related sample: Nested Views

Как вкладывать Webix компоненты друг в друга

По аналогии с предыдущим примером, вы можете отображать один Webix компонент внутри другого:

// создаем главный компонент
var v1 = new WebixView({
     config: ui_config,
     el: ".app1_here"
});
v1.render();
 
// создаем дочерний компонент
var v3 = new WebixView({
    config: ui_config,
    el: v1.getChild("right")
});
v3.render();

Related sample: Nested Views

Свойству el нужно задать место (HTML контейнер), где будет отображаться текущий компонент. В примере выше, новый компонент (v3) заменит дочерний компонент с ID "right" внутри главного компонента (v1).

Расширение компонента

Вы можете расширять конструктор WebixView по аналогии с Backbone компонентами:

var MyView = WebixView.extend({
    config: {
       view: "list", url: "data.json"
    },
    afterRender: function(){ ...},
    beforeRender: function(){ ...},
    someMethod: function(){ ...}
});
 
var view1 = new MyView({ el: "areaA" });

Есть два специальных метода, которые можно определить таким образом:

• beforeRender() - вызывается во время отрисовки, перед созданием Webix компонента
• afterRender() - вызывается во время отрисовки, после создания Webix компонента.

Здесь лучше всего устанавливать обработчики событий, а также загружать данные из коллекции

Вы также можете создавать кастомные методы.

var MyView = WebixView.extend({
    config: {
        rows: [
            {view: "list", id: "mylist", ..},
            {view: "template", id: "details", ..}
        ]
    },
    afterRender: function(){
        // устанавливаем обработчики        
        this.getChild("mylist").attachEvent( "onAfterSelect",
            _.bind(this.listSelected, this));
        // загружаем данные
        this.getChild("mylist").sync(this.options.collection);
    },
    listSelected: function(id){ 
        this.getChild("details").parse({ "id": id });
    }
});

Related sample: Views and Models

Работа с событиями Webix описана в этой статье.

Наверх