Ember element/component 移除行为异常 [twiddle provided]

Question

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

我使用的代码：

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

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

中删除了 record

现在在我的 fade-element 组件包装器中。我在 willDestroyElement 钩子中捕获了组件销毁。

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

但是当我替换时它不起作用：

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

它确实有效，但随后出现了一个新问题。例如：

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

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

Link 现场演示

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

Answer 1

所以有两件事：

父级包含X2，所以在父级之后自然插入一个元素是行不通的。
视图即将被拆除，因此您无法使用它，父视图将重新呈现，因此您不能将元素放入其中并期望它粘住。

解决方法是

等到使用 Ember.run.schedule('afterRender', ...) 重新渲染后。要了解有关 Ember 运行循环的更多信息，请参阅 https://guides.emberjs.com/v2.4.0/applications/run-loop/
保存对前一个元素的引用，以便您知道可以放置克隆的位置。

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

Ember element/component 移除行为异常 [twiddle provided]

Ember element/component removal behaves unexpectedly [twiddle provided]

jquery

ember.js

ember-cli

ember-components