javascript - rae - Deferir la eliminación de una vista para que pueda ser animada

deferir significado juridico

Question

Supongamos que tengo una plantilla que muestra una vista basada en una propiedad:

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

Esta área se alterna con cualquier cantidad de otras partes de la UI configurando App.set("contentsAreVisible", [true/false]);

Todo esto funciona bien

Sin embargo, ahora quiero animar cuando la vista se alterna. didInsertElement en didInsertElement funciona para mostrar el área, pero no puedo hacer lo mismo en willDestroyElement porque el elemento se elimina tan pronto como la función regresa, antes de que la animación tenga la oportunidad de ejecutarse.

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
        });
    }
});

¿Hay alguna forma de decirle a la vista que difiera la eliminación del elemento del DOM hasta que se complete la animación?

Aquí hay un violín con un ejemplo interactivo: http://jsfiddle.net/rlivsey/RxxPU/

Answer 1

Puede crear una función hide en su vista que elimine la vista cuando finalice la devolución de llamada, consulte http://jsfiddle.net/7EuSC/

Manubrios :

<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

Sé que esto ya tiene la respuesta correcta, pero pensé en mostrar algo similar en caso de que alguien más encuentre esto a través de Google como lo hice yo.

Una de mis aplicaciones tiene una sección de "detalles" que siempre tiene el mismo enlace de contenido, pero cambia la plantilla para los modos de visualización / edición / etc.

Debido a que estoy usando Rerender () para lograr esto y quiero que la vista se desvanezca y vuelva a entrar para que oculte cualquier error de la función de reedición (además de hacer que se vea bien), la he envuelto para fines de animación.

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

y

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

Tal vez no sea la mejor opción, pero quizás también sea útil para alguien