search

ember-animation / liquid-fire

Animations & transitions for ambitious Ember applications.
Other
1.15k stars 199 forks source link

Named liquid-outlets don't match route transitions #472

Open mrship opened 8 years ago

mrship commented 8 years ago

I have two liquid-outlets in my template:

= liquid-outlet 'rhs' class='right-hand-panel col-md-4 col-sm-6 col-xs-8' containerless=true
= liquid-outlet 'lhs' class='left-hand-panel col-md-4 col-sm-6 col-xs-8' containerless=true

The intent is to render nested routes into either a left hand panel, or a right hand panel. However, once I name the liquid-outlets, i.e. 'rhs' and 'lhs' then transitions no longer match correctly. Debug output indicates that the current route is not being correctly setup to match the transition:

[liquid-fire] Checking transition rules for <div id=​"ember545" class=​"ember-view">​…​</div>​
liquid-fire rule 1] rejected because oldRoute was
[liquid-fire rule 1 reverse] rejected because oldRoute was
[liquid-fire rule 1 reverse] rejected because newRoute was calendar.unavailabilities

(Note the lack of a route name for oldRoute.)

Changing the name to 'main' (for either of the outlets) and the transition is matched correctly. As it is, if I remove the name of the liquid-outlet (or just have one liquid-outlet).

Digging into the code, it appears that the outletState isn't being set correctly for any liquid-outlet named anything other than 'main', in the ember-internals code.

I don't know enough to be able to fix/address that; any ideas on how to have liquid-outlet work correctly with named outlets?

ef4 commented 8 years ago

Thanks, there is a legit bug here (possibly a dup of https://github.com/ember-animation/liquid-fire/issues/18).

But there is a simple workaround: use something like ember-sidebars instead of named outlets.

mrship commented 8 years ago

As far as I can tell, it isn't the same as #18, but I've put together a simple demo on Heroku that shows the problem in more detail. The repo is on github.

ember-sidebars isn't really what I'm looking for as I'm going to have several nested routes that use these sidebars (and are swapped out as required) and it would be a lot simpler to keep the model/template hooks that come for free than (as far as I can tell) using ember-sidebars.

I'll take a closer look at with-sidebar for nested routes and see if I can get that working, but if you have any pointers as where to debug for the named outlet issue, I'll see if I can help.