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

Question

我有一个带有组件的基本 ember cli 应用程序，我想根据传递给它的属性为组件指定不同的布局名称。我不确定如何实现这一目标。现在我只想知道如何将 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 进行协作之前，但现在我们如何在使用 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

Answer 1

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

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

Answer 2

从 Ember 2.3.0（可能更早）开始，不可以设置 layout 或 layoutName组件的 init 或 on('init') 处理程序中以覆盖模板。如果有模板，则无论 component.js.

中指定的布局如何，都将使用它

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

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

with ember cli, how to specify different layout for a component within POD structure

ember.js

ember-cli