CODEWITHSUNDEEP
javascriptember.js
GSP
GSP

Reputation: 3789

Dynamically determine existence of Ember component?

I was looking through the ember-htmlbars package and discovered this util for determining if a component is available? https://github.com/emberjs/ember.js/blob/master/packages/ember-htmlbars/lib/utils/is-component.js

Is there any way to use this from my app? I'm building a dashboard-type interface and some of the dashboard widgets have optional actions. In essence I'd like to do something like:

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

My fallback is to put a blank action component for each of my widgets that don't have one, but it would be cleaner to be able to check to see if they exist first.

Upvotes: 2

Views: 411

Answers (1)

Bek
Bek

Reputation: 3207

you can create helper is-component 

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

and use it like {{#if (is-component model.actionComponent) }}

Upvotes: 3

Related Questions