Ember Views, Handlebars and jQuery Effects

Question

I would like to incorporate jQuery effects (fadeIn, fadeOut, etc...) in parts of my handlebar templates. I think that this can more or less be accomplished with a separate view in which the view's isVisible property is initially false and its didInsertElement method calls something like this.$().fadeIn().

However, what I'd like to do is add a jQuery effect to just a small part of a view - say for purposes of displaying a small block of content that is initially hidden by an {{#if}} statement that evaluates to false and later through user feedback gets toggled to true. See the following http://jsfiddle.net/YeGbF/2/.

Any suggestions?

Answer 1

You could use a view for the stuff which shall be shown faded in, see http://jsfiddle.net/pangratz666/dJMwC/

Handlebars:

{{#view App.FadeInView contentBinding="this"}}
    <div>{{content.someAdditionalDetail}}</div>
{{/view}}

JavaScript:

App.FadeInView = Ember.View.extend({
    didInsertElement: function(){
        this.$().hide().show('slow');
    }
});

Also have a look at Deferring removal of a view so it can be animated