Animating parametric views

[aarossig]

First off... Awesome work on this library! I was able to get it up and running with nested views. Everything is working great so far, especially considering that I have spent less than a day or two with Ember.js.

I have one little snag that I am not sure how to solve. I have a child route that accepts a parameter:

this.route('design', { path : ':app_id' });

The animation works when I first enter the child view but 'switching' to the same view with a different parameter does not trigger an animation.

Is this an issue or did I miss something? The parameter drastically changes page content and I would like to animate this transition.

[billdami]

I believe this has to do with how ember handles transitioning to the same route with a different value for a dynamic segment. Instead of completely destroying and re-rendering the entire view (which is what ember-animate listens for in order to fire your animation hooks) it just swaps in the model associated with the dynamic segment's new value, which causes only the parts of the view that need to update to do so.

This is a good thing in most cases as its more performant, but definitely makes animating transitions in these scenarios a lot harder. Not sure if this is something that could be worked around without heavy modification to ember's view layer (it will probably be solved once ember has baked in animation support), but @gigafied has much more knowledge in this area than I, so maybe he'll be able to come up with something. :-)

[aarossig]

Thanks @billdami it is definitely not a deal breaker, but the animation support is just soooo cool.

I'll keep my eye on this and if there is a work-around, I will integrate it into my app.

[gigafied]

Yeah, the animateIn and animateOut hooks should be supported for this use case. I'll look into it, sometime next week and see if I can fix it.

[buckyflowers]

Ran into this same issue, would love to see a fix. Thanks @gigafied!

[buckyflowers]

I added the following to my view as a workaround for now and it seems to be working.

rerenderObserver:function(){
    this.rerender();
}.observes('controller.content')

[gigafied]

Sorry guys, haven't been able to look into this yet. @buckyflowers solutions seems like the best way to solve this for now, and is pretty simple.