如何验证模板中是否存在特定的上下文组件?

Question

在Ember.js中，我正在设计一个上下文组件，并希望处理子组件不存在的情况，并显示一些通用信息。

但是我不知道如何检测模板中何时存在标签。 使用yield和哈希，如果标签不存在，则不显示任何内容，仅此而已...

第一种情况：所有子组件都存在

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

Answer 1

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

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

您还可以使用更高级的解决方案。 例如，如果可选子组件已注册，则可以在父组件上注册自身，如果将其删除，则可以取消注册。您应该设置对使用者透明的注册。例如，通过将register和unregister参数传递给生成的可选子项，即在didInsertElement和willDestroyElement钩子中调用该参数。请注意，使用该解决方案时，可选子组件将不会在与父组件相同的运行循环中呈现，而是稍后呈现一个运行循环。用户可能会看到闪烁。它还可能引入其他时间问题。

我想这些是这种情况最常见的模式。第一个示例是 Ember 上下文表。它使用 defaultHeader 属性来控制用户是否能够自定义组件块形式的标头。第二种模式的一个非常高级的例子是余烬传单

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

Answer 2

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