Question

我有一个带有组件的基本ember 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进行协作之前，但现在我们如何在使用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

从Ember 2.3.0开始（可能在之前），

layout处理程序覆盖模板。如果有模板，则无论component.js中指定的布局如何，都将使用该模板。

如果您可以选择扩展组件并省略模板，那么上述技术将起作用。如果您需要重新打开现有组件，那么截至目前您似乎已经失败了。希望将来会改变。

与ember cli一起，如何为POD结构中的组件指定不同的布局

1 个答案: