lundi 20 avril 2015

Ember: control component behavior based on content of 'yield'

Imagine I have an Ember component which for purposes of this question merely wraps its content in a div, adding a bit of text:

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

So I call it as

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

And all is fine. However, if model.text is empty/null/undefined, I don't want to generate the <div class="Component"> part at all. How can I do that? Of course I could do

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

but that somehow seems duplicative.

What I would really like to do is to be able to define the component as the equivalent of

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

Or, alternatively in component.js

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

and then in the template.hbs for the component

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

Any thoughts on how to handle this case?




Aucun commentaire:

Enregistrer un commentaire