javascript - 页面在 DELETE 请求完成之前呈现

Question

我正在开发“todo 应用程序”主干客户端。在 TodoView 中发出删除请求后，它将被重定向到索引页面(显示整个列表)。 问题是重定向后，删除的todo还在列表中。但是刷新后就消失了。

是因为待办事项列表呈现的速度比完成的 DELETE 请求快吗？

在 todoView 中，我听到“删除”按钮:

events: {
  'click .red-button' : 'delete',
},

delete: function() {
  this.model.destroy({
    success: function(model, res) {
      $('.body-container').empty();
      //redirecting to the index page--the todo list
      navigate(''); //equals to Backbone.Router.prototype.navigate(url, {trigger: true}) 
    }
  })
},

我覆盖了 todo 模型的同步。 “删除”方法如下:

case 'delete':
  request
    .del(this.url())
    .end(function(res) {
      console.log('deleting......');
    });
    options.success();
break;

Answer 1

首先，不要使用success 回调!非常糟糕的做法/这是为将来养成的坏习惯(请参阅下文了解“原因”)。在触发 destroy 事件之前，Backbone 不会“完成”它的工作。所以听模型的销毁事件。清洁工更容易 :)

delete: function(){
  this.model.destroy();
  //Ideally put this in your ROUTER
  this.listenTo(this.model, 'destroy', function(){
     navigate();
  }
}

但是你还没有完成。您遇到的最可能的问题是索引页上的任何 ListView 都没有监听它的模型的 destroy 事件。假设您使用 ItemViews(个人 View )，您会这样做

 var TodoView = Backbone.View.extend({
   initialize: function(){
     this.listenTo(this.model, 'destroy', this.remove);
   }
 });

这将解决表面问题。

但在那种情况下，你有一个更大的潜在问题。当您离开时，索引页面中的 ToDoList View 未正确删除。这会导致很多问题(尤其是当您的应用程序增长时)。每当发生导航事件时，确保所有 View 都从页面中remove()d。非常重要!!!

如果您发布“索引页”的代码，我可以帮助您进一步诊断。

为什么使用 success 回调不好(草案 1)

当您开始在主干网上构建“真实”应用程序时，通常会有很多 View 、模型和各种“监听”您的模型的对象被销毁。您可能有 5 到 10 个不同的 View 听这个模型(事实上，我在我编写的几乎每个企业应用程序中都遇到过这种情况)。如果您使用 success 回调，跟踪正在发生的事件链会变得非常困惑。当一个 Action (例如导航离开)发生时，他们首先(也是唯一)要查看的地方是路由器。否则，假设有 50-100 个不同的“ Action ”会导致导航被触发，并且它们都是从不同模型的 success 回调中发生的，这将花费您几天的时间来找出为什么某些导航发生了。如果让对象采取 listenTo 不同对象的 Action ，则可以将其集中。稍后我会更详细地解释这一点(我知道这看起来很困惑)。但是请相信我，您想避免使用 success。