推迟删除视图,以便对其进行动画处理

Question

假设我有一个显示基于属性的视图的模板:

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

通过设置,可以通过UI的任意数量的其他部分切换此区域 App.set("contentsAreVisible", [true/false]);

一切正常.

但是,我现在想要在切换视图时进行动画处理.连接didInsertElement到动画显示区域的工作,但我不能这样做willDestroyElement因为在动画有机会运行之前,该函数返回后立即删除元素.

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

有没有办法告诉视图推迟从DOM中删除元素,直到动画完成？

这是一个互动示例的小提琴:http://jsfiddle.net/rlivsey/RxxPU/

Answer 1

您可以hide在视图上创建一个函数,在回调完成时删除视图,请参阅http://jsfiddle.net/7EuSC/

把手:

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