使用 ember cli，如何在 POD 结构中为组件指定不同的布局答案

【问题标题】：with ember cli, how to specify different layout for a component within POD structure使用 ember cli，如何在 POD 结构中为组件指定不同的布局
【发布时间】：2015-04-30 17:17:15
【问题描述】：

我有一个带有组件的基本 ember cli 应用程序，我想根据传递给它的属性为组件指定不同的 layoutName。我不确定如何实现这一目标。现在我只想知道如何为已知模板指定一个模板名来开始。这是我尝试过的：

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 进行协作之前，但现在我们在使用 ember-cli 构建东西时如何实现相同的目标！！

解决方案： 根据@sunrize920 的建议，我不得不稍微突破 POD 结构。所以工作解决方案如下所示：

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

【问题讨论】：

标签： ember.js ember-cli

【解决方案1】：

所以组件和布局并不像您期望的那样开箱即用。假设我们有一个名为my-component 的组件。 Ember 将您在 templates/components/my-component 中定义的模板解释为布局，以及您通过块语法将组件包裹起来的任何内容：{{#my-compenent}}{{/my-component}} 作为组件的模板。看看这个JSBin 就明白我的意思了。

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

【讨论】：

【解决方案2】：

从 Ember 2.3.0（可能更早）开始，不可能在组件的 init 或 on('init') 处理程序中设置 layout 或 layoutName 以覆盖模板。如果有模板，无论component.js中指定的布局如何，都会使用它。

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

【讨论】：