如何为POD结构中的组件指定不同的布局

Question

我有一个带有组件的基本成员cli应用程序，我想根据传递给它的属性为组件指定不同的layoutName。我不知道如何做到这一点。现在，我只想知道如何将一个templateName指定到一个已知的模板来开始。这就是我试过的：

import Ember from 'ember';

export default Ember.Component.extend({

    layoutName: null,

    initialize: function() {
        this.set('layoutName', 'pi/pods/components/questions/single-select/standard-layout');
    }.on('init')

});

我的文件夹结构看起来是：

app
|-pods
    |-components
              |-questions
                    |-single-select
                            |-component.js
                            |-template.hbs//just has {{yield}}
                            |-standard-layout.hbs//says hello

只是一个想法:这可能是一个新的问题本身-在我们使用jsbin进行协作之前，但现在我们如何实现同样的，当我们正在构建的东西与成员-cli！！

解决方案:按照 @sunrize920的建议，我必须打破的结构。因此，工作解决方案如下：

import Ember from 'ember';

export default Ember.Component.extend({

    layoutName: null,

    initialize: function() {
        this.set('layoutName', 'components/questions/single-select/standard-layout');           
    }.on('init')

});

然后我的文件夹结构是这样的：

dev-folder
    |-app
        |-pods
            |-components
                      |-questions
                            |-single-select
                                    |-component.js
                                    |-standard-layout
                                         |-template.hbs

Answer 1

因此，组件和布局并不像您所期望的那样完全从盒子中运行。假设我们有一个名为my-component的组件。烬解释您在templates/components/my-component中定义的模板为布局，以及通过块语法包装组件的任何内容：{{#my-compenent}}{{/my-component}}作为组件的模板。看看这个JSBin，明白我的意思。

我所指的不是使用pod语法，但我可以想象，如果您没有定义template.hbs或任何惯例-cli用于解析组件模板，您应该能够将layoutName和templateName传递给您的组件。希望能起作用

Answer 2

在Ember2.3.0(或者之前)中，不可能在组件的layout或layoutName中设置init或on('init')处理程序来覆盖模板。如果存在模板，则不管component.js中指定的布局如何，都将使用该模板。

如果您可以选择扩展组件并省略模板，那么上述技术将有效。如果您需要重新打开和现有组件，到目前为止，您似乎是不走运的。希望这将在未来有所改变。