Question

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

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

通过设置App.set("contentsAreVisible", [true/false]);

，可以通过UI的任意数量的其他部分切换此区域

一切正常。

但是，我现在想要在切换视图时进行动画处理。挂钩didInsertElement可以动画显示区域，但我不能在willDestroyElement中执行相同的操作，因为在动画有机会运行之前，该函数一返回就会删除该元素。 / p>

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

Answer 2

我知道这已经有了正确的答案，但我认为我会弹出类似的东西以防其他人通过Google发现这一点，就像我做的那样。

我的一个应用程序有一个“详细信息”部分，它始终具有相同的内容绑定，但更改了视图/编辑/等模式的模板。

因为我正在使用rerender（）来实现这一点，并希望视图再次淡出，所以它隐藏了重新渲染函数的任何毛刺（以及让它看起来很漂亮）我已将它包装在动画中目的。

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

和

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

也许不是最好的选择，但也许对某人有用

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

2 个答案: