web-dev-qa-db-fra.com

Tri d'une collection de dorsale après l'initialisation

J'utilise Backbone.js pour afficher une liste d'articles, par exemple des livres. Une fois la liste rendue, l'utilisateur a la possibilité de les trier. Ainsi, si l'utilisateur clique sur Trier par titre ou Trier par nom d'auteur, la liste se triera elle-même côté client.

  window.Book = Backbone.Model.extend({
   defaults: {
     title: "This is the title",
     author: "Name here"
   },

Quelle est la meilleure façon d'effectuer ce tri en utilisant dans le contexte d'une application Backbone. Dois-je utiliser un trieur dom jQuery dans l'AppView?

backbone.js
52
Jhony Fung

Il y a une discussion sur ce même sujet que vous voudrez peut-être examiner: https://github.com/documentcloud/backbone/issues/41 .

En bref, lorsqu'un utilisateur sélectionne "trier par X", vous pouvez:

  1. Définissez la fonction comparator sur la collection
  2. Appelez la fonction sort de la collection (qui déclenchera un événement sort)
  3. Écoutez l'événement sort dans votre vue et (effacez et) redessinez les éléments

Une autre façon de gérer les étapes 1 et 2 consiste à avoir votre propre méthode qui appelle la méthode sortBy de la collection, puis déclenche un événement personnalisé que votre vue peut écouter.

Mais il semble que l'effacement et le redessinage soient le moyen le plus simple (et peut-être même le plus rapide) de trier vos vues et de les synchroniser avec l'ordre de tri de votre collection.

50
satchmorun

Vous pouvez mettre à jour la fonction de comparateur, puis appeler la méthode de tri.

// update comparator function
collection.comparator = function(model) {
    return model.get('name');
}

// call the sort method
collection.sort();

La vue sera automatiquement restituée.

48
jpanganiban

comparator est ce dont vous avez besoin

var PhotoCollection = Backbone.Collection.extend({
    model: Photo,
    comparator: function(item) {
        return item.get('pid');
    }
});
12
Nick Vanderbilt

Cette méthode fonctionne bien et permet le tri par tous les attributes dynamiquement et gère ascending ou descending:

var PhotoCollection = Backbone.Collection.extend({
    model: Photo,
    sortByField: function(field, direction){
            sorted = _.sortBy(this.models, function(model){
                return model.get(field);
            });

            if(direction === 'descending'){
                sorted = sorted.reverse()
            }

            this.models = sorted;
    }
});
3
Loourr