ember.js - 如何处理从 DOM 效果中移除？

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

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

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

基本上就是克隆 DOM 元素，让 Ember 销毁与视图关联的元素，用克隆做动画（一定要在动画完成后销毁克隆）

Answer 2

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

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')

只需在您的车把中使用

{view MyView}}