Deferring Removal Of A View So It Can Be Animated

Say I have a template which displays a view based on a property: {{#if App.contentsAreVisible}} {{view ToggleContents}} {{/if}} This area is toggled by any number of other par

Solution 1:

You could create a hide function on your view which removes the view when the callback is finished, see http://jsfiddle.net/7EuSC/

Handlebars:

<script type="text/x-handlebars" data-template-name="tmpl" >
    <button {{action "hide" }}>hide</button>

    This is my test view which is faded in and out
</script>​

JavaScript:

Ember.View.create({
    templateName: 'tmpl',

    didInsertElement: function() {
        this.$().hide().show("slow");
    },

    _hideViewChanged: function() {
        if (this.get('hideView')) {
            this.hide();
        }
    }.observes('hideView'),

    hide: function() {
        var that = this;
        this.$().hide("slow", function() {
            that.remove();
        });
    }
}).append();​

Solution 2:

I know this already has the right answer, but I thought I'd pop something similar up in case anyone else finds this through Google like I did.

One of my apps has a 'detail' section that always has the same content binding but changes the template for view/edit/etc modes.

Because I'm using rerender() to achieve this and want the view to fade out then in again so it hides any glitchiness of the rerender function (as well as make it look nice) I have wrapped it in a for animation purposes.

<script>_templateChanged: function(){
  self = this;
  $('#effects-wrapper').fadeOut('fast',function(){
    self.rerender();
    $(this).fadeIn('fast');
  });            
}.observes('template')
</script>

and

<div id="effects-wrapper">
{{App.Views.Whatever}}
</div>

Perhaps not the best option, but also perhaps useful to someone