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的属性，而不是字符串{{1} }。另外，我不认为你需要在这里使用组件助手，因为你无论如何都要对组件名称进行硬编码。这是你在这方面编辑的hbs

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

基于对象数组

1 个答案: