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

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

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

通过设置App.set("contentsAreVisible", [true/false]);通过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

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

把手 ：

 ​ 

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（）来实现这一点，并希望视图再次淡出，所以它隐藏了重新渲染函数的任何毛刺（以及让它看起来很漂亮）我将它包装在动画中。

和

 
 {{App.Views.Whatever}}  

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