{{#liquid-outlet}}

Acts just like a normal Ember {{outlet}}, except:

  • it respects the transition map and lets you animate between routes.
  • it wraps its content in a non-virtual view, meaning that it adds markup. See the Common Behavior and Options that apply to all liquid-fire helpers.
  • it does not support the view option to override its view class.

It otherwise does everything {{outlet}} does, including named outlets (like {{liquid-outlet "sidebar"}}).

When to use it

Use this when you want to animate the transitions between routes.

Demo

Notice that the URL changes when you click the links — these are real route transitions.

Demo template:

{{liquid-outlet class="demo-container"}}

Demo transition map:

this.transition(
  this.fromRoute('helpers-documentation.liquid-outlet.index'),
  this.toRoute('helpers-documentation.liquid-outlet.other'),
  this.use('toLeft'),
  this.reverse('toRight')
);