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 .