Differire rimozione di una visualizzazione in modo che possa essere animata

Question

Say Ho un modello che mostra una vista in base a una proprietà:

{{#if App.contentsAreVisible}} 
    {{view ToggleContents}} 
{{/if}} 

Quest'area è attivata da un numero qualsiasi di altre parti dell'interfaccia utente modificando App.set("contentsAreVisible", [true/false]);

Tutto funziona correttamente.

Tuttavia, ora desidero animare quando la vista è attivata. L'hooking su didInsertElement funziona per animare mostrando l'area, ma non posso fare lo stesso in willDestroyElement perché l'elemento viene rimosso non appena la funzione restituisce, prima che l'animazione abbia la possibilità di essere eseguita.

App.ToggleContents = Ember.View.extend({ 

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

    // this doesn't work 
    willDestroyElement: function(){ 
     this.$().hide("slow", function(){ 
      // animation is complete, notify that the element can be removed 
     }); 
    } 
}); 

C'è un modo per dire al fine di rinviare la rimozione del elemento dal DOM fino a quando l'animazione è completa?

Ecco un violino con un esempio interattivo: http://jsfiddle.net/rlivsey/RxxPU/

Answer 1

Si potrebbe creare una funzione hide sul vostro punto di vista che toglie la vista quando il callback è finito, vedere http://jsfiddle.net/7EuSC/

Manubrio:

<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();​ 

Answer 2

So che questo ha già la risposta giusta, ma ho pensato di far apparire qualcosa di simile nel caso in cui qualcun altro lo trovi su Google come ho fatto io.

Una delle mie app ha una sezione "dettagli" che ha sempre lo stesso legame di contenuto ma modifica il modello per le modalità di visualizzazione/modifica/etc.

Perché sto usando il rerender() per ottenere questo e voglio che la vista si dissolva e ritorni di nuovo in modo che nasconda qualsiasi problema di vizio della funzione di rerender (oltre a renderlo bello) L'ho avvolto in un scopi di animazione.

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

e

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

Forse non la soluzione migliore, ma forse anche utile a qualcuno