Ember元素/组件移除意外行为[提供旋转]

Question

基本上我试图将可视化添加到删除操作中。

代码即时使用：

    {{#each wrappedRecords as |record|}}
        {{#fade-element}}
                {{record.name}}
                <span class="remove" {{action "removeRecord" record}}></span>
            </span>
        {{/fade-element}}
    {{/each}}

因此，正在触发removeRecord操作，并从 wrappedRecords

中删除记录

现在在我的 fade-element 组件包装器中。我在willDestroyElement hook中捕获组件destroy。

export default Ember.Component.extend({
       willDestroyElement : function () {
            var clone = this.$().clone();
            clone.insertAfter(this.$());
            clone.fadeOut();
        },
});

然而，当我替换时它不起作用：

带有clone.insertAfter(this.$());

的

clone.insertAfter(this.$().parent());

它确实有效，但随后又出现了一个新问题。 E.g：

我有2个项目，我尝试删除它看起来像这样的第一个

X1（删除）X2（第二个元素）X1（被追加到父母的克隆）

链接到现场演示

https://ember-twiddle.com/ef8c4bcdcd8d2eb5b5c4?openFiles=fade-element.component.js%2Cfade-element.template.hbs

Answer 1

所以有两件事：

1. 父级包含X2，因此在父级无效后自然插入元素。
2. 视图即将被拆除，因此您无法使用它，并且父视图将会重新渲染，因此您无法将元素放入其中并期望它坚持下去。

解决方案是

1. 等到使用Ember.run.schedule进行重新渲染之后（＆＃39; afterRender＆＃39;，...）。要了解有关Ember Run Loop的更多信息，请参阅https://guides.emberjs.com/v2.4.0/applications/run-loop/
2. 保存对上一个元素的引用，以便您知道可以放置克隆的位置。

请将https://ember-twiddle.com/966c8c6d364e0f631c0b?openFiles=fade-element.component.js%2Cfade-element.template.hbs视为解决方案。