Comment enregistrer l'ordre des objets dans Parse.com / backbone.js

Question

J'ai une liste de dossiers appartenant à un utilisateur et je souhaite qu'il puisse les réorganiser par glisser-déposer.Je peux faire fonctionner le glisser-déposer correctement, mais je n'arrive pas à comprendre comment enregistrer les résultats.J'utilise Parse, et je pense que cela signifie que je dois récupérer chaque objet, modifier l'attribut order, puis le réenregistrer...mais cela ne semble pas fonctionner, car ils sortent tous avec le même ordre.

Après avoir trié puis exécuté .sortable('toArray'), j'ai un tableau d'identifiants de dossier, précédé du mot « dossier », il ressemble donc à ["folder_ab9gu3nd", "folder_kwkgiutyqo", "folder_s856skt8w"].

Donc, je veux enregistrer le dossier ab9gu3nd avec la commande 0, kwkgiutyqo avec la commande 1 et s856skt8w avec la commande 2.

Voici mon code (« résultat » est le tableau avec les identifiants de dossier) :

        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();
                }
            });
        }

Lorsque j'exécute ceci, les dossiers se retrouvent tous dans l'ordre « 2 », comme si la valeur finale de ii était utilisée pour chacun d'eux.Comment puis-je empêcher que cela se produise ?Merci!

Answer 1

Vous êtes trompé par deux choses :

1. Ton varLes éléments à l'intérieur de la boucle sont hissés vers la fonction environnante, ils ne sont pas locaux à la boucle.
2. Ton success les gestionnaires sont déclenchés de manière asynchrone et leurs fermetures sont terminées exactement le même folderOrder.

Pour la première, votre boucle ressemble en fait à ceci en ce qui concerne JavaScript :

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

donc il n'y en a qu'un folderOrder pour toute la fonction et votre boucle attribue simplement ii à chaque itération.

Le deuxième problème est le problème habituel "AJAX en boucle":vous construisez une série de fonctions anonymes qui sont des fermetures sur la même folderOrder variable.Le résultat est que vos trois success les gestionnaires finissent par faire référence au même folderOrder valeur et, au moment où ils seront déclenchés, la boucle sera terminée et folderOrder aura sa dernière valeur de la boucle ;la dernière valeur dans votre cas est deux.

Pour résoudre votre problème, il vous suffit de vous séparer folderOrder valeurs dans les différents success gestionnaires.Une solution consiste à utiliser une fonction pour générer vos gestionnaires de réussite :

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

et puis:

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

Une autre approche courante consiste à utiliser une fonction auto-exécutable pour créer efficacement une portée distincte pour le corps de la boucle :

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

L'approche que vous adoptez est une question de préférence personnelle.