Ember Views, Handlebars and jQuery Effects

ember.js

Solution

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

Problem

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?

Original source

Related problems