基于对象数组动态生成组件

Question

好吧，我对 Ember（以及类似的框架）还很陌生，所以如果我遗漏了一些明显的东西，请原谅我。

我有一个包含一些逻辑的设置菜单组件。该逻辑的一部分是计算的属性 returns 对象数组（可能的设置）。它将数据向下传递到视图组件。

菜单-component.js

possibleSettings: computed(function() {
    // Example of returned data
    return [
        {
            type: 'time',
            min: 1,
            max: 60,
        },
        },
            type: 'sound',
            values: [‘alarm’, ‘beep’, ‘rooster’],
        },
    ]
});

菜单-component.hbs

{{menu-component/menu-view
    possibleSettings=possibleSettings}}

每个设置都有自己的组成部分，例如：

menu-component/time.hbs

<label>Time</label>
{{input value=time}}

menu-component/sound.hbs

<label>Sound</label>
{{dropdown items=sounds}}

我希望视图组件根据 possibleSettings 的结果呈现这些组件。所以按照上面的示例数据，它需要渲染时间和声音组件。

我想我需要这样的东西，但我无法理解最后一点。我可以用全新的眼光看待事物。

menu-component/settings-view.hbs

<div>
    {{#each possibleSettings as |setting|}}
        {{#if (eq setting.type time)}}
            {{component ‘menu-component/time'}}
        {{else if (eq setting.type sound)}}
            {{component ‘menu-component/sound'}}
        {{/if}}
    {{/each}}
</div>

非常感谢任何帮助。

Answer 1

问题似乎是您没有将 time 括在车把的引号中，因此它正在组件本身上寻找名为 time 的属性，而不是字符串 "time"。另外，我认为您不需要在此处使用组件助手，因为无论如何您都在对组件名称进行硬编码。这是你在这方面编辑的 hbs

<div>
  {{#each possibleSettings as |setting|}}
    {{#if (eq setting.type "time")}}
      {{menu-component/time}}
    {{else if (eq setting.type "sound")}}
      {{menu-component/sound}}
    {{/if}}
  {{/each}}
</div>

或者，您可以这样做：

{{#each possibleSettings as |setting|}}
  {{component (concat 'menu-component/' setting.type)}}
{{/each}}

基于对象数组动态生成组件

Dynamically generate components based on array of objects

handlebars.js

ember.js