Backbone.js `model.destroy()` 自定义过渡？

Question

当我使用 Backbone 的 model.destroy() 时，它似乎会自动从 DOM 中删除该视图。

有没有办法让我使用 destroy() 发送 DELETE 请求，但自己从 DOM 中删除视图？

类似于：

this.model.destroy({
    wait: true,
    success: function(){
        $('#myElement').animate({
            "height" : "0",
            1000,
            function(){$('#myElement').remove()}
        });
    }
});

Answer 1

您需要在包含项目视图 (documentation) 的集合视图中覆盖 _onCollectionRemove()。这是从集合中删除模型时调用的函数，也是破坏视图的函数。具体如何选择覆盖它取决于你，但用你的动画功能覆盖它可能是最简单的，可能沿着以下几行...

_onCollectionRemove: function(model) {
  var view = this.children.findByModel(model);
  var that = this;
  view.$('#myElement').animate({
        "height" : "0",
        1000,
        function(){
            that.removeChildView(view);
            that.checkEmpty();
        }
    });
}

如果您更喜欢在 destroy 回调中手动处理视图的删除，只需重写 _onCollectionRemove() 以包含一个空函数并在删除的回调中执行任何您想做的事情要求。不过，我推荐我上面描述的方法，而不是在 destroy 回调中执行。完全消除该功能然后在代码中的其他地方处理它的职责会干扰 Marionette 的预期事件流。只需用不同的 UI 效果覆盖该函数即可保持自然流动。

编辑：另一个用户之前的回答（现在由于投票被删除而被删除）建议在 UI 效果完成后调用 destroy 可能是明智的完全的。由于 OP 指出的原因，这不是一个好方法 - 如果 destroy 方法出现问题（例如，如果远程服务器出现故障），在用户看来好像模型已被删除（ UI 效果已经完成）即使服务器无法访问并且模型仍然存在。

Answer 2

您需要使用其中之一：

collection.remove 模特
collection.reset collection.model

每个方法都会重新呈现您的集合或复合视图。

使用 js 或 jQuery;

直接从 collection/composite 视图中删除元素不是好的做法

Answer 3

我们可以关注视图生命周期，而不是关注模型事件。为此，Marionette 使 onBeforeDestroy 回调在 Marionette.View 上可用（由所有 Marionette 视图扩展）。在您的 ItemView 中，您将像这样定义回调

onBeforeDestroy: function () {
  $('#myElement').animate({ "height" : "0", 1000 });
}

他们在这里是一个重要的警告。由于 $.animate 是一个异步函数，因此可能会在 $.animate 完成转换之前删除视图。因此，我们必须对 onBeforeDestroy.

进行修改

onBeforeDestroy: function () {
  var animationDelay = 1000ms;
  this.remove = _.delay(_.bind(this.remove, this), animationDelay );
  this.$el.animate({ "height" : "0", animationDelay });
}

本质上，我们在这里所做的是将 View.remove() 方法设置为在动画运行完成后触发，确保在调用 this.remove 时，它是异步调用的，在动画已运行完成。我想您也可以使用 Promises 来做到这一点，但这需要更多的开销。

Answer 4

提到的 onBeforeDestroy 方法对我不起作用。它在 backbone 中抛出错误（删除方法缺失）我的解决方案具有相同的方法并且在 itemView

中运行良好

remove: function(){

    this.$el.animate({"height" : "0"},500, function(){
        $(this).remove();
    });

},

Backbone.js `model.destroy()` 自定义过渡？

Backbone.js `model.destroy()` custom transitions?

javascript

jquery

backbone.js

marionette