{{#liquid-if}}
is a replacement for Ember's
normal {{#if}}
, except it:
true
and false
states.{{#liquid-unless}}
is the complement to
{{#liquid-if}}
.
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}) );