javascript - 在 ember.js 中从数组中删除记录的正确方法

Question

我希望能够单击列表中某个项目的删除按钮，发送 HTTP DELETE，然后仅在 API 返回成功代码时实际删除记录。

这是我当前的代码:

App.FooController = Ember.ObjectController.extend({
    actions: {
        removeFoo: function() {
            var foo = this.get('model');

            var onFail = function(response) {
                alert(response.responseText);
                foo.rollback();
            };

            foo.deleteRecord();
            foo.save().then(function() {}, onFail);
        }
    }
});

这基本上是有效的......除了 foo 在 save 时从 DOM 中删除，并且如果 rollback 被调用，它会再次添加，但是位于 Foo 对象数组的末尾。

我可以在回滚之后对该数组进行排序，但这似乎不是正确的方法。对于这种常见情况，是否有更好的 ember.js 模式？

Answer 1

我会使用ArrayController ;有了它，每个项目都有自己的 ItemController，您可以在其中设置一个标志 isVisible。

因此，当您删除/撤消时，您可以切换该属性。

为了避免保存 DOM 中但隐藏的项目，我看到两个选项:

1. 将它们留在那里，并在保存整个数组时跳过带有 isVisible = false 的那些。
2. 添加一个计时器，在 X 秒后从 DOM 中删除 isVisible = false 的项目。

从 DOM 和 API 中删除/保存可以是 ItemController 的一部分，类似于向每个项目添加“自毁”功能。

根据您想要在 UI 中进行的交互，可以重新排列这些说明。构建 block 将保持不变:ArrayController/ItemController。