假设我有一个模板,它显示基于属性的视图:
{{#if App.contentsAreVisible}}
{{view ToggleContents}}
{{/if}}
通过设置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/
您可以在视图上创建一个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();
我知道这个已经有了正确的答案,但我想我会弹出类似的东西,以防其他人像我一样通过谷歌找到它。
我的一个应用程序有一个"详细信息"部分,该部分始终具有相同的内容绑定,但更改了查看/编辑等模式的模板。
因为我使用rerender()来实现这一点,并且希望视图先淡出,然后再进入,这样它就可以隐藏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>
也许不是最好的选择,但也可能对