时间戳

首页 > 解决方案 > 如何验证模板中是否存在特定的上下文组件？

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

问题描述

在 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

解决方案

有不同的模式可以做到这一点。

最简单的方法是在父组件上使用参数。在这种情况下，消费者决定呈现可选的孩子，例如：<ParentComponent @withOptionalChild={{true}} />

您还可以使用更高级的解决方案。例如，可选的子组件可以在它被注册时在父组件上注册自己，如果它被移除则取消注册。您应该设置对消费者透明的注册。例如，通过将register和unregister参数传递给产生的可选子项，该子项正在调用该子项didInsertElement并进行willDestroyElement挂钩。请注意，使用该解决方案，可选子组件不会在与父组件相同的 runloop 中呈现，而是稍后在一个 runloop 中呈现。这对用户来说可能是闪烁的。它还可能引入其他时间问题。

我想这些是该场景最常见的模式。第一个例子是Ember Contextual Table。它使用一个defaultHeader属性来控制用户是否能够以组件的块形式自定义标题。第二种模式的一个非常高级的例子是Ember Leaflet

在大多数情况下，我会推荐这个论点。它可能会添加一些样板，但它更容易实现和维护。

推荐阅读