动态生成基于对象阵列的组件

Question

好的，我对Ember（和框架）很新颖，所以如果我遗漏了一些明显的东西，请原谅我。

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

菜单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}} 

每个设置都有它自己的组件，例如：

菜单组分/time.hbs

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

菜单组分/ sound.hbs

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

我想要的视图分量来呈现这些组件，基于possibleSettings的结果。因此，按照上面的示例数据，它需要同时呈现时间和声音组件。

我想我需要这样的东西，但我无法将头围绕在最后一点。我可以用新的眼光看待事物。

菜单组件/设置 - 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"。另外，我不认为你需要在这里使用组件助手，因为你无论如何都在硬编码组件名称。这里是你的哈佛商学院在这方面的编辑

<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}}