Unable to link non-standard view with Ember Routing (RC 3) and with Ember AnimatedView

Question

Does anyone know how to link a route say PostRoute (names changed from original app), that has an equivalent controller PostController with a non-standard view say BlogPostView, in RC 3? I am using Ember Animated outlet and view, but did nothing extra as far as routes/animations are concerned for RC 1, but RC 3 gives this error). In RC 1, just declaring something like this worked, how to modify route definition to make it work with RC 3? I tried re-building ember-animated-outlet.js with RC 3, but same result (hoping that it may have been built with pre-RC 3 ember version)?

App.Router.map(function(){
...
this.route('post');
...
}

along with

<script type="text/x-handlebars" data-template-name="application">
    {{animatedOutlet name="main"}}
</script>

<script type="text/x-handlebars" data-template-name="post">
    {{view App.BlogPostView}}
</script>

I get this error

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

I tried calling the view within renderTemplate as this.render('blogPost') so that it finds BlogPostView, but on debugging such a call returns as "undefined".

I have found that the view for the post route is identified as virtual. How to tell Ember that for this route, use this view, which is non-virtual so that it stops complaining. My BlogPostView looks like this:

App.BlogPostView = Ember.View.extend({
     template: $.template('blog_post'),
     didInsertElement: function() {
     ...
     }
     ...
});

Thanks,
Paddy

Can you explain what do u mean by "look like"? I have extended Ember.View.extend (names of classes shown here have been changed from original) — Paddy
by "look like" I mean that it's a common practice to show more code samples around the problem so it's easier for the community to help :) — intuitivepixel
Hi @intuitivepixel, I have attached a snippet of how my custom view looks like, $.template retrieves a pre-compiled Handlebar template. Hope this gives some more information so that you can help me. Do let me know if you need further information. — Paddy
I'm not completely sure about my answer since your problem could be also related to some naming conventions not being followed, can you post the original namings of your views/template/controller combinations? — intuitivepixel

intuitivepixel intuitivepixel · Accepted Answer · 2013-06-03T10:09:12

I guess the error comes from exact this line template: $.template('blog_post'). As statet in the docs:

All child views of an App.AnimatedContainerView need to be explicitly defined, since the animations only work with non-virtual views. This means that if you have a route called invoices.show and you expect to animate into it, you need to define the view for it: App.InvoicesShowView = Ember.View.extend()

What the docs do not explicitly state is that you need to define also a template for your view, so therefore since you can't use precompiled template for the animated outlets, you have to define them early on. This means that if you have a BlogPostView you need a blogPost template already defined to backup the BlogPostView.

Your view would then result in something like:

App.BlogPostView = Ember.View.extend({
  template: 'blog_post'
});

and a template to backup the view like:

<script type="text/x-handlebars" data-template-name="blog_post">
  ...
</script>

Let me know if it helps

Unable to link non-standard view with Ember Routing (RC 3) and with Ember AnimatedView

1 Answers