ember.js 如何验证模板中是否存在特定上下文组件？

esyap4oy 于 2022-11-05 发布在其他

关注(0)|答案(2)|浏览(121)

在Ember.js中，我正在设计一个上下文组件，并希望处理子组件不存在的情况，而是显示一些通用信息。
但是我不知道如何检测标签在模板中是否存在，使用yield和hash，如果标签不存在，什么都不显示，就这样...

第一例：所有子组件都存在

<ParentComponent as |parent|>
  <parent.mandatoryChild>
    Something
  </parent.mandatoryChild>
  <parent.child>
    Something else
  </parent.child>
</ParentComponent>

第二种情况：parent.child组件不存在

<ParentComponent as |parent|>
  <parent.mandatoryChild>
    Something
  </parent.mandatoryChild>
  {{! no parent.child here }}
</ParentComponent>

我的父组件模板是：

<div class="mandatoryChild-wrapper-class">
{{yield
        (hash
              mandatoryChild=(component this.mandatoryChildComponent)
        )
}}
</div>
<div class="child-wrapper-class">
<!-- how to show some generic information when child is not present in the callee template? -->
{{yield
        (hash
              child=(component this.childComponent)
        )
}}
</div>

ember.js

来源：https://stackoverflow.com/questions/58995091/how-to-verify-that-a-specific-contextual-component-is-present-in-template

2条答案

按热度按时间

s3fp2yjn1#

有不同的模式可以做到这一点。
最简单的方法是在父组件上使用一个参数。在这种情况下，消费者决定呈现可选的子组件，例如：register
您也可以使用更高级的解决方案。例如，如果可选子组件已注册，则可以在父组件上注册它自己;如果已删除，则可以取消注册。您应该对使用者透明地设置注册。例如，通过将register和unregister参数传递给生成的可选子组件，这是在didInsertElement和willDestroyElement钩子中调用的。请注意，使用该解决方案，可选子组件将不会在与父组件相同的运行循环中呈现，而是在一个运行循环之后呈现。这可能对用户来说是可见的闪烁。它还可能引入其他计时问题。
我想这是该场景最常见的模式。第一种模式的一个例子是Ember Contextual Table。它使用defaultHeader属性来控制用户是否能够以组件的块形式定制头部。第二种模式的一个非常高级的例子是Ember Leaflet
在大多数情况下，我会推荐这个论点。它可能会增加一些样板，但它更容易实现和维护。

赞(0）回复(0）举报 2022-11-05

xbp102n02#

<div class="mandatoryChild-wrapper-class">
  {{yield (hash mandatoryChild=(component this.mandatoryChildComponent))}}
</div>
<div class="mandatoryChild-wrapper-class">
  {{#if this.showOptionalChild}}
    {{yield (hash child=(component this.childComponent))}}
  {{else}}
    generic information
  {{/if}}
</div>

赞(0）回复(0）举报 2022-11-05

我来回答

ember.js 如何验证模板中是否存在特定上下文组件？

2条答案

相关问题

热门标签

最新问答