Ember RC 3 and animated outlet view



When using RC 3 with animated outlets, I get the following error:

Ember.AnimatedContainerView can only animate non-virtual views. You need to explicitly define your view class.

What does this mean? Does it indicate that I have to wrap my views within container views, and have not just simple views for the route? For a route like ProductRoute, I do have a (as per my understanding, what is called a) non-virtual view like Ember.View.extend, called ProductView defined, but it still gives the error. What is exactly a non-virtual view - if it is an explicitly defined view, then I have defined one as explained above. This does not occur with RC 1. Upgrading to RC 3 when using animated outlets causes this.



Virtual views are views that don’t have a wrapping DOM element - the contents of the template are injected directly into the DOM (in your case) at the location of the outlet. The AnimatedContainerView cannot support virtual views because it relies on manipulating the view’s wrapper element for the animations.

Virtual views arise in Ember if you don’t define a concrete view class for your template. By default, if Ember doesn’t find a view class matching your template name, it uses the View registered in the container as "view:default" which is a virtual view (Ember.View with Ember._Metamorph mixed in).

As you surmised, you need an explicitly defined view. It doesn’t need to be a container view or anything, just Ember.View or an extension thereof. Check the class name of your view to make sure it matches the name of the template you are rendering into the outlet via the call to render() in your route. If the name looks right, step into the render call and check out how it looks up the view class to see why it isn’t finding yours.



Hi Rob,
What can be done if the route’s template name and view name mismatch? Is there a way to link them, so that this problem is solved? Due to programmatic/other reasons, I have different names for the view and the template name.



you can set templateName property in your defined view


But I am using compiled template in the view so I have defined ‘template’ property not templateName property? Can renderTemplate method in route definition help?

Thanks, Paddy


Hi folks, Here is the code snippet I am using:

<script type="text/x-handlebars" data-template-name="index">
{{view Dashboard.MapView route="index"}}

where the MapView uses a compiled Handlebar template (not just templateName). On debugging, I find that the view is identified as virtual for the index route (controller name is IndexController - it has to detect MapView as the related view and since this view is non-virtual, it should go through). How do set up Ember so that it detects that I have declared a non-virtual view called MapView for this route?



Hi Paddy,

What are you trying to animate? If it’s the {{animatedOutlet}} that contains index, you need to implement App.IndexView = Em.View.extend();. It doesn’t care about MapView.

Maybe you can provide a JSbin example?


I shall try this and let you know. My initial attempt has not succeeded, may be there is something wrong with my code, don’t know how to post the entire JSBin as it is a bit complex code. Is there any other pointer to find out the root cause?


No, I need some info :slight_smile: