컬렉션에서 생성 된 백본 모델의 올바른 순서를 보장하는 방법은 무엇입니까?

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

대기열 아약스 요청을 처리하는 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

는 사용 서버는 예를 들어 유닉스 타임 스탬프를 들어, ID를 생성하고, MU가 너무 짧은 제안으로 당신은 항상 당신을 수 정렬 더 구체적인 필요하면, 일종의 컬렉션은

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

를 사용하여 에테르는 더 세분화 된 미세 시간으로 가거나 단순히 증분 ID 서버 측을 생성합니다.