0

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

我使用的代码是：

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

因此触发了 removeRecord 操作，并从WrappedRecords中删除了一条记录

现在在我的淡入淡出元素组件包装器中。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（附加到父元素的克隆）

链接到现场演示

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

4

1 回答 1

1

所以有两件事：

  1. parent 包含 X2，因此在 parent 之后插入元素自然是行不通的。
  2. 视图即将被拆除，所以你不能使用它，并且父视图会重新渲染，所以你不能将元素放入其中并期望它粘住。

解决方案是

  1. 等到使用 Ember.run.schedule('afterRender', ...) 进行重新渲染之后。要了解有关 Ember 运行循环的更多信息，请参阅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将解决方案作为一个旋转。

于 2016-03-08T14:27:06.223 回答