动态确定是否存在Ember组件？ [英] Dynamically determine existence of Ember component?

问题描述

我正在浏览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）}}<！-这将是一个属性-> 
< div class = panel-footer> 
 {{component model.actionComponent model = model}} 
< / div> 
 {{/ if}} 
< / div> 
  

我的后备方法是为每个没有一个小部件放置一个空白操作组件，

解决方案

您可以创建帮助器<$ c $，这样会更清洁。 c> is-component

 导出默认Ember.Helper.extend（{
计算（[name]）{
返回this.container.registry.has（'component：'+名称）; 
} 
}）
  

并像 {{＃if（is-component model.actionComponent）}} 一样使用它p>

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.

解决方案

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

这篇关于动态确定是否存在Ember组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！