Parse.com/backbone.js에서 개체 순서를 저장하는 방법

Question

사용자에게 속한 폴더 목록이 있으며 끌어서 놓기로 순서를 바꿀 수있게하려고합니다. 끌어서 놓기 작업을 수행 할 수 있지만 결과를 저장하는 방법을 알 수는 없습니다. 나는 Parse를 사용하고 있는데, 나는 그것이 각 객체를 가져 와서 order 속성을 변경하고 다시 저장해야한다는 것을 의미한다고 생각한다. 그러나 그것들은 모두 같은 순서로 나오기 때문에 작동하지 않는 것처럼 보인다.

정렬 후 .sortable ('toArray')을 수행하면 폴더 ID 배열에 'folder'단어가 붙어 있으므로 [ "folder_ab9gu3nd", "folder_kwkgiutyqo", "folder_s856skt8w" ].

:

그래서, 나는 2

여기 내 코드입니다 ('결과'폴더 ID를 가진 배열이다), 순서 0 폴더 ab9gu3nd을 저장하기 위해 1 kwkgiutyqo 및 주문 s856skt8w 할

 for(var ii=0; ii<result.length; ii++) { 
          // Get actual id 
      var folderId = result[ii].replace('folder_', ''); 
      var folderOrder = ii; 
      var folder = Parse.Object.extend("Folder"); 
      var query = new Parse.Query(folder); 
      query.get(folderId, { 
       success: function(folder) { 
        // The object was retrieved successfully. 
        folder.set('order', folderOrder); 
        folder.save(); 
       } 
      }); 
     } 

이 파일을 실행할 때 ii의 최종 값이 모든 파일에 사용 된 것처럼 폴더의 순서는 모두 '2'로 끝납니다. 어떻게 이런 일이 일어나지 않게 할 수 있습니까? 감사!

Answer 1

당신은 두 가지에 속지되고있어 : 루프 내부

1. 귀하의 var들 주변 기능에 게양, 그들은 루프 로컬 아니에요.
2. success 처리기가 비동기 적으로 트리거되며 정확히 동일한 folderOrder 이상으로 처리기가 트리거됩니다.

   function whateverItIsCalled() { 
       var folderId, folderOrder, folder, query, ii; 
       //... 
       for(ii = 0; ii < result.length; ii++) { 
        //... 
        folderOrder = ii; 
        //... 
       } 
       //... 
   } 
   

   그래서 전체 기능에 대해 하나의 folderOrder이 있고 루프는 단순히에 그것을 ii 할당 : 첫 번째의 경우

, 당신의 루프는 실제로 지금까지 자바 스크립트에 관한 한 다음과 같습니다 각 반복.

두 번째 문제는 일반적인 "AJAX in a loop"문제입니다. 같은 folderOrder 변수를 초과하는 일련의 익명 함수를 구성하고 있습니다. 결과적으로 사용자의 success 핸들러 3 개 모두가 동일한 folderOrder 값을 참조하게되고 트리거 될 때까지 루프가 완료되고 folderOrder은 루프의 마지막 값을 갖게됩니다. 마지막 값은 2입니다.

문제를 해결하려면 success 핸들러에 folderOrder 값을 별도로 지정하기 만하면됩니다. 다음

function makeSuccess(folderOrder) { 
    return function(folder) { 
     folder.set('order', folderOrder); 
     folder.save(); 
    } 
} 

과 :

이

query.get(folderId, { 
    success: makeSuccess(folderOrder) 
}); 

또 다른 일반적인 방법은 효과적으로 루프의에 대한 별개의 범위를 생성하는 자체 실행 기능을 사용하는 방법 중 하나는 당신의 성공 핸들러를 생성하는 함수를 사용하는 것입니다 본문 :

for(var ii = 0; ii < result.length; ii++) 
    (function(ii) { 
     // Same stuff you currently have... 
    })(ii); 

당신이 취하는 접근 방식은 개인적인 취향입니다.