2

divこの質問の目的のために、そのコンテンツを でラップし、少しのテキストを追加するだけの Ember コンポーネントがあるとします。

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

だから私はそれを

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

そして、すべて問題ありません。ただし、が空/null/未定義の場合、パーツをまったくmodel.text生成したくありません。<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}}

このケースを処理する方法について何か考えはありますか?

4

2 に答える 2

5

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、コンポーネントがブロック パラメータで呼び出された場合に true になります (ブロック形式で を使用して呼び出しますas |someParam|)。

于 2015-08-12T19:56:08.783 に答える
0

次の方法で if ステートメントを短縮できます。

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

// some other template
{{#component showContent=model.text}}
    {{model.text}}
{{/component}}

欠点は、コンテンツがなくても、コンポーネントが常に div 要素を作成することです。したがって、定型コードを追加したとしても、コンポーネントの if ステートメントの方が優れているように思えます。

于 2015-04-20T16:27:42.667 に答える