Ember.js — Могу ли я вложить компонент в другой, прежде чем он будет добавлен в шаблон Handlebars?

Я разрабатываю приложение с Ember CLI версии 2.6.1 и использую библиотеку пользовательского интерфейса под названием Webix.

Webix генерирует html через JavaScript следующим образом:

var accordion = webix.ui({
    view:"accordion",
    type:"wide",
    cols:[
        { header:"col 1", body:"content 1", width:150 },
        { header:"col 2", body:"content 2", width:150 },
        { header:"col 3", body:"content 3", width:150 },
        { header:"col 4", body:"content 4", width:150 },
        { header:"col 5", body:"content 5", width:150 }
    ]
});

Webix импортируется в мое приложение Ember, и я могу сгенерировать компонент с таким синтаксисом, создав экземпляр в JS-файле компонента вместо файла Handlebars (где он будет жить, если я использую html).

Как это:

    import Ember from 'ember';

    export default Ember.Component.extend({
        didRender: function() {

            webix.ui({ 
                container: this.container,
                height: 585,
                view:"accordion",
                    type: "line",
                    rows:[ 
                    { 
                        header:"Panel 1",
                        body: {
                            padding: 10,
                            rows: [
                                { 
                                   view:"textarea", 

                                   labelAlign:"right", 
                                   //height:150, 
                                   value: "type here"  
                                },
                                { 
                                   view:"textarea", 

                                   labelAlign:"right", 
                                   //height:150, 
                                   value: "type here"  
                                }

                            ]

                        }
                    }
                ]
            });

        }
    });
}

Это прекрасно работает, но по мере роста сложности приложения у меня будет один ГИГАНТСКИЙ компонент, который будет невозможно поддерживать.

Я хотел бы извлечь вложенные представления Webix в их собственные компоненты, которые создаются по мере необходимости.

Как это:

введите здесь описание изображения

Мой родительский компонент создан в Handlebars, но поскольку компонент Webix имеет собственную методологию вложения, я не могу просто добавить новый компонент:

введите здесь описание изображения

Поскольку структура компонента обычно создается с помощью Handlebars с переданными туда свойствами, как я могу вложить компонент в другой до того, как его родитель будет загружен в Handlebars?


javascript ember.js ember-cli webix
person PhillipKregg    schedule 29.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если у webix есть методы для добавления строк после создания экземпляра компонента, способ есть. Вам нужно создать компонент webix-accordion, предоставить объект webix для вложенных компонентов, используя yield. Затем создайте вложенный компонент, который получает этот объект и добавляет к нему необходимый контент. Я не могу привести полный пример, но в шаблоне это будет выглядеть так:

{{#webix-accordion as |webixView|}}
    {{webix-accordion-row webixView=webixView}}
{{/webix-accordion}}

Предлагаю посмотреть, как реализованы компоненты в ember-cli-mapbox, чтобы получить представление (см. в компонентах mapbox-map и mapbox-marker).

person Gennady Dogaev    schedule 29.06.2016
comment
Элементы управления макетом пользовательского интерфейса Webix имеют методы addView, которые позволяют добавлять строки и столбцы на лету, поэтому описанный выше подход должен быть действительно возможен. - person Aquatic; 19.07.2016