Ember:基于'yield'的内容控制组件行为

Question

想象一下,我有一个Ember组件,为了这个问题的目的只是将其内容包装在一个div,添加一些文本:

<div class="Component">
  Value is: {{yield}}
<div>

所以我称之为

{{#component}}
  {{model.text}}
{{/component}}

一切都很好.但是,如果model.text为empty/null/undefined,我根本不想生成该<div class="Component">部分.我怎样才能做到这一点？我当然能做到

{{#if model.text}}
  {{#component}}
    {{model.text}}
  {{/component}}
{{/if}}

但这似乎有些重复.

我真正想做的是能够将组件定义为等效的

{{if yield}} {{! made-up syntax; of course it doesn't work }}
  <div class="Component">
    Value is: {{yield}}
  <div>
{{/if}}

或者,也可以在component.js中

yieldNotEmpty: Ember.computed.bool('yield') // made-up syntax; doesn't work

然后在组件的template.hbs中

{{if yieldNotEmpty}}
  <div class="Component">
    Value is: {{yield}}
  <div>
{{/if}}

有关如何处理此案的任何想法？

Answer 1

从Ember 1.13.0开始,hasBlock引入了一个新的模板词.hasBlock在以块的形式调用组件时将为true.例如:

{{#if hasBlock}}
    {{! yield }}
{{else}}
    {{! regular component }}
{{/if}}

所以对于你的例子,这将给出:

{{#if hasBlock}}
    <div class="Component">
        Value is: {{yield}}
    <div>
{{/if}}

引入的另一个关键字是hasBlockParams,如果使用块参数调用组件(以块形式调用as |someParam|),则它将成立.