javascript – Backbone.js – 在上一个保存前保存模型POST(创建)而不是PUT(更新)请求时出现问题

,用户可以非常快速地添加对象,然后通过简单地选择相关字段来开始更新这些对象的属性.我遇到的问题是,有时候用户将服务器打到初始保存状态,我们最终会节省两个对象.

如何重新创建此问题的示例如下所示：

>用户单击添加人员按钮,我们将其添加到DOM中,但是由于我们还没有任何数据,因此不保存任何内容.

person = new Person();

>用户在“名称”字段中输入一个值,并在其中输入选项卡(名称字段失去焦点).这将触发保存,以便我们更新服务器上的模型.由于模型是新的,Backbone.js将自动向服务器发出POST(创建)请求.

person.set({name：’John’});

person.save(); //创建新模型

>然后,用户可以很快地输入他们已经标签的年龄字段,输入20和制表符到下一个字段(年龄因此失去焦点).这再次触发保存,以便我们更新服务器上的模型.

person.set({age：20});

person.save(); //更新模型

所以我们期望在这种情况下一个POST请求来创建模型,一个PUT请求来更新模型.

但是,如果第一个请求仍在处理中,并且在上述第3点的代码已经运行之前还没有响应,那么我们实际获得的是两个POST请求,因此创建了两个对象而不是一个.

所以我的问题是是否有一些最佳实践方法来处理这个问题和Backbone.js？或者,Backbone.js应该有一个用于保存操作的排队系统,以便在该对象的先前请求成功/失败之前不发送一个请求？或者,或者我应该构建一些东西,以便通过发送只有一个创建请求而不是多个更新请求来处理此问题,也许使用某种排序,或者检查Backbone模型是否在请求之间,并等到该请求为完成.

您如何处理这个问题的建议将不胜感激.

我很高兴采取一些刺激实施某种排队系统,虽然你可能需要忍受我的代码,不会像现有的代码库那样形成！

我已经测试和设计了一个补丁解决方案,灵感来自于@Paul和@Julien谁发布在这个线程.这是代码：

(function() {
  function proxyAjaxEvent(event, options, dit) {
    var eventCallback = options[event];
    options[event] = function() {
      // check if callback for event exists and if so pass on request
      if (eventCallback) { eventCallback(arguments) }
      dit.processQueue(); // move onto next save request in the queue
    }
  }
  Backbone.Model.prototype._save = Backbone.Model.prototype.save;
  Backbone.Model.prototype.save = function( attrs, options ) {
    if (!options) { options = {}; }
    if (this.saving) {
      this.saveQueue = this.saveQueue || new Array();
      this.saveQueue.push({ attrs: _.extend({}, this.attributes, attrs), options: options });
    } else {
      this.saving = true;
      proxyAjaxEvent('success', options, this);
      proxyAjaxEvent('error', options, this);
      Backbone.Model.prototype._save.call( this, attrs, options );
    }
  }
  Backbone.Model.prototype.processQueue = function() {
    if (this.saveQueue && this.saveQueue.length) {
      var saveArgs = this.saveQueue.shift();
      proxyAjaxEvent('success', saveArgs.options, this);
      proxyAjaxEvent('error', saveArgs.options, this);
      Backbone.Model.prototype._save.call( this, saveArgs.attrs, saveArgs.options );
    } else {
      this.saving = false;
    }
  }
})();

这样做的原因如下：

>当模型上的更新或创建请求方法仍在执行时,下一个请求被简单地放入队列中,以便在调用错误或成功的回调之一时进行处理.

>请求时的属性存储在属性数组中,并传递给下一个保存请求.这意味着当服务器用第一个请求的更新模型进行响应时,来自排队请求的更新的属性不会丢失.

我已经上传了 Gist which can be forked here .