{{#liquid-if}}

{{#liquid-if}} is a replacement for Ember's normal {{#if}}, except it:

  • respects the transition map so you can animate changes between its true and false states.
  • wraps its content in markup to facilitate animation. See the Common Behavior and Options that apply to all liquid-fire helpers.

{{#liquid-unless}} is the complement to {{#liquid-if}}.

Demo

Here's a bit of a silly example that shows off the flexibility of the transition rules.

<div id="liquid-box-demo">
  <label>I'm renting a </label>
  {{simple-select value=vehicle choices=vehicles}}

  {{#liquid-if isBike class="vehicles"}}
    <label>
      Would you like a helmet? {{input type="checkbox" checked="helmet"}}
    </label>
  {{else}}
    <label>License Number</label>
    {{input type="text" value=license}}
    <label>License State</label>
    {{simple-select value=state choices=states}}
  {{/liquid-if}}

  <button type="button" class="btn btn-light">Yay, let's go!</button>
</div>

this.transition(
  this.hasClass('vehicles'),

  // this makes our rule apply when the liquid-if transitions to the
  // true state.
  this.toValue(true),
  this.use('crossFade', {duration}),

  // which means we can also apply a reverse rule for transitions to
  // the false state.
  this.reverse('toLeft', {duration})
);