Question

我有一个基于条件呈现的视图：

{{#if boolean}}
  {view MyView}}
{{/if}}

我可以轻松地为元素插入DOM时添加一个漂亮的动画：

MyView: {
  didInsertElement: function() {
    this.$().hide().show('slide', {direction: 'left', duration: 2000});
  }
}

然而，当从DOM中删除元素时，无法做到这一点：

MyView: {
  willDestroyElement: function() {
    this.$().hide('slide', {direction: 'right', duration: 2000});
  }
}

这不起作用，因为基于超出此视图控制的条件显示元素，该元素立即从DOM中删除。异步动画永远不会运行。

处理此问题的最佳方法是什么？

Answer 1

对于一个简单的情况，您可以将布尔值绑定到视图并观察它，手动隐藏和显示视图，但将其留在DOM中。

Answer 2

这是一个hacky解决方案，但对我有用：

willDestroyElement: ->
  element = @$().clone()
  @$().replaceWith element
  element.slideUp 250, ->
    element.remove()

基本上，克隆DOM元素，让Ember破坏与视图关联的元素，并使用克隆进行动画（确保在动画完成后销毁克隆）

Answer 3

为什么不在你的观点上做这样的事情？

booleanChanged: function() {
  var boolean = this.get('controller.boolean');
  if (boolean) {
    this.$().hide().show('slide', {direction: 'left', duration: 2000});
  } else {
    this.$().hide('slide', {direction: 'right', duration: 2000});
  }
}.observes('controller.boolean')

只需在你的handelbar中使用

{view MyView}}

如何处理从DOM效果中删除？

3 个答案: