javascript - 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 已导入到我的 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 View 提取到它们自己的组件中，并根据需要实例化这些组件。

像这样:

我的父组件是在 Handlebars 中创建的，但由于 Webix 组件有自己的嵌套方法，我不能直接添加新组件:

由于组件结构通常是通过 Handlebars 组成，并在其中传递属性，因此在将其父组件加载到 Handlebars 之前，如何将一个组件嵌套到另一个组件中？

Answer 1

如果 webix 有在实例化组件后添加行的方法，那就有办法了。您需要创建 webix-accordion 组件，使用yield 将 webix 的对象公开给嵌套组件。然后创建嵌套组件，该组件接收该对象并向其添加所需的内容。我无法提供完整的示例，但在模板中它看起来像:

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

我建议看看 ember-cli-mapbox 中的组件是如何实现的获得一个想法(查看mapbox-map 和mapbox-marker 组件)。