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

Question

Я разрабатываю приложение с 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 импортируется в мое приложение Эмбер, и я могу генерировать компонент с этим синтаксисом путем создания экземпляра в файле JS компонента вместо рули файл (где он будет жить, если я использую 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 в свои собственные компоненты, которые создаются по мере необходимости.

Как это:

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

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

Answer 1

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

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

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