Ember Animated Outlet not targeting outlet or view

1

I’ve been trying to get the ember-animated-outlet project to work for quite a while, without much luck. All my views are declared explicitly, my main outlet uses the animated-outlet helper and is named “main”, my links are all using link-to-animated (with animations defined), and all programatic transitions are made using transitionToAnimated(name, animations, model).

It is working for all top level routes, however, it doesn’t work for any of the child routes. When programmatically making the transition with transitionToAnimated() called inside of an action handler in the application route, the transition is only partially made. The url displays the correct url of that child route, but the view and all html inside its template is not being rendered.

My code for the parent transition (that works) and the child (that doesn’t work):

actions: {
  showGroups: function(toggle) {
    this.transitionToAnimated('groups.index', {
      main: 'slideRight'
    });
  },
  showGroup: function(group) {
    return this.transitionToAnimated('group.index', {
      main: 'slideRight'
    }, group);
  }
}

My code in the application template where the animated outlet is defined:

{{animated-outlet name="main" class="main-outlet"}}

In the action handler for transitioning to the child (which isn’t working) I know that the action is being called, the route name is correct, the main animated outlet is in fact named “main”, and that the group model is defined.

I am trying to render both the parent and the child route into the same outlet per the source for the ember-animated-outlet demo on github (lines 26 and 29). One of the problems I’ve observed is that the views are not being displayed in the view tree in the ember inspector.

2

You should use liquid-fire for animations.

1 Like
3

So I got liquid fire working extremely easily with a new instance of ember using cli, however in a more complicated instance that uses a rails backend I’ve been having some trouble.

I get two errors after changing the outlet in my application template to:

{{liquid-outlet use="crossFade"}}

The errors are (the second only occurs when specifying the “use”):

First:

Uncaught TypeError: Cannot read property 'RSVP' of undefined liquid-fire-0.5.0.js?body=1:423
 (anonymous function) liquid-fire-0.5.0.js?body=1:423
 requireModule liquid-fire-0.5.0.js?body=1:55
 reify liquid-fire-0.5.0.js?body=1:26
 requireModule liquid-fire-0.5.0.js?body=1:54
 reify liquid-fire-0.5.0.js?body=1:26
 requireModule liquid-fire-0.5.0.js?body=1:54
 reify liquid-fire-0.5.0.js?body=1:26
 requireModule liquid-fire-0.5.0.js?body=1:54
 (anonymous function) liquid-fire-0.5.0.js?body=1:1508
 (anonymous function) liquid-fire-0.5.0.js?body=1:1535

Second:

Uncaught Error: <Dfw.ApplicationView:ember750> Handlebars error: Could not find property 'liquid-outlet' on object <Dfw.ApplicationController:ember778>. VM25478:993
 ProfileManager.ended VM25478:993
 Ember.subscribe.after VM25478:2055
 finalizer ember.js?body=1:3643
 tryCatchFinally ember.js?body=1:7855
 instrument ember.js?body=1:3651
 EmberObject.extend.renderToBuffer ember.js?body=1:25467
 CoreView.extend.createElement ember.js?body=1:27018
 merge.insertElement ember.js?body=1:25236
 CoreView.extend._insertElement ember.js?body=1:26946
 DeferredActionQueues.invoke ember.js?body=1:8595
 DeferredActionQueues.flush ember.js?body=1:8647
 Backburner.end ember.js?body=1:8110
 Backburner.run ember.js?body=1:8165
 apply ember.js?body=1:7995
 run ember.js?body=1:6627
 hash.success ember-data.js?body=1:2010
 j jquery-2.1.1.min.js?body=1:3
 k.fireWith jquery-2.1.1.min.js?body=1:3
 x jquery-2.1.1.min.js?body=1:5
 (anonymous function) jquery-2.1.1.min.js?body=1:5
4

You need to use the globals version of liquid-fire. From the liquid-fire website:

If you’re not using ember-cli, grab a prebuilt release. You will also need to manually add velocity.js to your page.

And later on the main page:

Old-school apps without a module resolver should pass their transition map function to LiquidFire.map. There is an example here.

I have also put together a JSBin showing how to use liquid-fire in globals mode:

5

Awesome, thanks for the help. The problem I was experiencing before though was that after I installed velocity.js (which I know was successfully included) and the latest liquid-fire script (v0.5.0), I got this error:

Uncaught TypeError: Cannot read property 'RSVP' of undefined

Which came from the liquid-fire script itself on line 423. I’m going to install an older version of liquid-fire to see if its a bug, but besides that, do you see any way to deal with this error?

6

Looks like I failed to include the liquid-fire script after ember, so of course it was undefined!

Thanks again for your help.