Question

我有一个foo s列表：

[
  { name: 'Foo 1' type: 'important' },
  { name: 'Foo 2' type: 'normal' },
  { name: 'Foo 3' type: 'purple' }
]

我想渲染该列表，但其中一些有特殊处理 - 不仅仅是一个类，而是完全不同的标记。

我的第一直觉是使用component helper：

{{#each foos as |foo|}}
  {{component (join 'foo-' foo.type) foo=foo}}
{{/each}}

缺点是我必须为每个type定义一个组件，服务器可能会向我发送我不知道的新类型。如果未定义foo-generic组件，我想回到基本的foo-${type}组件。

要做到这一点，我想我会创建一个帮手：

{{#each foos as |foo|}}
  {{foo-entry foo}}
{{/each}}

// app/helpers/foo-entry.js
Ember.Helper.helper(function([ foo ]) {
  // ...
});

但我有两个问题：

如何在帮助程序中获得container，以便检查component:foo-${foo.type}是否存在？
如何从另一个助手中调用component助手？

Answer 1

我想我可以使用组件而不是帮助器来完成它：

// app/pods/foo-entry/component.js
export default Ember.Component.extend({
  tagName: null,

  foo: null,

  componentName: Ember.computed('foo.type', function() {
    const type = this.get('foo.type');

    const exists =
      this.container.lookupFactory(`component:foo-${type}`) != null ||
      this.container.lookupFactory(`template:foo-${type}`) != null;

    return exists ? `foo-${type}` : 'foo-generic';
  })
})

{{!-- app/pods/foo-entry/template.hbs --}}
{{component componentName foo=foo}}

如何以编程方式调用Ember的组件助手？

1 个答案: