<LiquidBind />

Renders a bound value into your template, and uses the transition map to decide how to animate when the bound value changes.

Saying <LiquidBind @value={{this.someValue}} /> is a drop-in replacement for {{this.someValue}} , except this wraps the content in markup so that it can be targeted for animation. See the Common Behavior and Options that apply to all liquid-fire helpers.

There is also a block form of <LiquidBind> </LiquidBind> that is demonstrated on the next page .

Demo

:
:
<div id="liquid-bind-demo">
  <LiquidBind @value={{this.hours}} />:<LiquidBind @value={{this.minutes}} />:<LiquidBind @value={{this.seconds}} />
</div>
this.transition(this.childOf('#liquid-bind-demo'), this.use('toUp'));
#liquid-bind-demo {
  font-size: 48px;
  line-height: 66px;
  text-align: center;

  .liquid-outlet {
    display: inline-block;
    vertical-align: top;
  }

  .liquid-child {
    /* This prevents a slight horizontal wobble in firefox. */
    width: 1.5em;
  }
}