Ember.js - 在添加到Handlebars模板之前，我可以將組件嵌套到另一個組件中嗎？

Question

我正在開發一個帶Ember CLI版本2.6.1的應用程序，我正在使用一個名爲Webix的UI庫。

Webix通過JavaScript生成HTML這樣的：

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組件，並使用yield將webix的對象展示給嵌套組件。然後創建嵌套組件，接收該對象並向其添加所需的內容。我不能提供一個完整的例子，但在模板它看起來像：

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

我建議看在ember-cli-mapbox實現的組件如何得到一個想法（看mapbox地圖和mapbox標誌物成分）。