如何確保在集合中創建的骨幹模型的正確順序？

Question

我異步上傳文件中的文件清單，（使用FORMDATA）在特定索引：

files.create({position: index + 1 }, {at: index}); // files is Backbone.Collection 

服務器然後保存上傳和轉移的後特定位置的文件位置，以免費爲新插入的地方文件。

然後在客戶端上，我偵聽添加事件並使用選項中的索引插入文件視圖。

files.on("add", function(model, collection, options) { 
    // insert file view at options.index position 
}) 

我也更新position屬性在集合中的所有型號：

files.on("add remove", function(){ 
    this.each(function(m, index) { 
    m.set({position: index + 1}); 
    }) 
}); 

問題是，當我上傳多個文件在同一時間在同一索引位置，文件視圖追加到列表錯誤的順序。

如何確保主幹集合中文件模型的正確順序和position屬性？

Answer 1

我能重寫隊列ajax請求的collection.create。爲此，我使用了this answer的代碼。

var Documents = Backbone.Collection.extend({ 

    model: Document, 

    url: "https://stackoverflow.com/a/documents", 

    initialize: function() { 
    this.on("add remove", this.updatePositions, this); 
    this.ajaxQueue = $({}); 
    }, 

    updatePositions: function(model, collection, options) { 
    this.each(function(m, index) { 
     m.set({position: index + 1}); 
    }) 
    }, 

    create: function(model, options) { 
    var jqXHR 
     , dfd = $.Deferred() 
     , promise = dfd.promise() 
     , coll = this; 

    // queue our ajax request 
    this.ajaxQueue.queue(doRequest); 

    // add the abort method 
    promise.abort = function(statusText) { 
     // Proxy abort to the jqXHR if it is active 
     if (jqXHR) { 
     return jqXHR.abort(statusText); 
     } 

     // If there wasn't already a jqXHR we need to remove from queue 
     var queue = this.ajaxQueue.queue() 
     , index = $.inArray(doRequest, queue); 

     if (index > -1) { 
     queue.splice(index, 1); 
     } 

     // Reject the deferred 
     dfd.rejectWith(options.context || options, 
        [promise, statusText, ""]); 

     return promise; 
    }; 

    // Run the actual collection.create 
    function doRequest(next) { 
     options = options ? _.clone(options) : {}; 
     model = coll._prepareModel(model, options); 
     if (!model) return false; 
     if (!options.wait) coll.add(model, options); 
     var success = options.success; 
     options.success = function(nextModel, resp, xhr) { 
     if (options.wait) coll.add(nextModel, options); 
     if (success) { 
      success(nextModel, resp); 
     } else { 
      nextModel.trigger('sync', model, resp, options); 
     } 
     }; 
     jqXHR = model.save(null, options) 
     .done(dfd.resolve) 
     .fail(dfd.reject) 
     .then(next, next); 
    }; 

    return promise; 
    } 

}); 

Answer 2

而不是使用JavaScript的起源位置，使用服務器生成的ID，例如UNIX時間戳，並作爲畝太短建議，整理你的收藏使用

comparitor: function() { 
    return -this.timestamp // negative ensures latest items show up on top, and olders at the bottom 
} 

，如果您需要更具體的排序，你可以隨時ether轉到更細粒度的microtime，或者簡單地生成一個增量id服務器端。