动态确定 Ember 组件是否存在

Dynamically determine existence of Ember component?

本文关键字:是否 存在 组件 Ember 动态      更新时间:2023-09-26

我正在浏览 ember-htmlbars 包,发现了这个用于确定组件是否可用的实用程序? https://github.com/emberjs/ember.js/blob/master/packages/ember-htmlbars/lib/utils/is-component.js

有什么方法可以从我的应用程序中使用它吗?我正在构建一个仪表板类型的界面,一些仪表板小部件具有可选操作。从本质上讲,我想做这样的事情:

<div class="panel panel-default">
  <div class="panel-body">
    {{component model.displayComponent model=model}}
  </div>
  {{#if isComponent(model.actionComponent) }} <!-- this would be a property -->
    <div class="panel-footer">
      {{component model.actionComponent model=model}}
    </div>
  {{/if}}
</div>

我的回退是为每个没有动作组件的小部件放置一个空白的操作组件,但是能够首先检查它们是否存在会更干净。

您可以创建帮助程序is-component

export default Ember.Helper.extend({
  compute([name]) {
    return this.container.registry.has('component:' + name);
  }
})

并像{{#if (is-component model.actionComponent) }}一样使用它