J’utilise Backbone.js pour afficher une liste d’éléments, par exemple Books. Après le rendu de la liste, l’utilisateur dispose d’options pour les sortinger. Ainsi, si l’utilisateur clique sur Trier par titre ou Trier par nom d’auteur, la liste sera sortingée du côté client.
window.Book = Backbone.Model.extend({ defaults: { title: "This is the title", author: "Name here" },
Quelle est la meilleure façon de réaliser ce sorting en utilisant une application Backbone. Est-ce que j’utilise un sortingeur jQuery dom dans l’AppView?
Il y a une discussion sur ce sujet que vous pourriez vouloir regarder: https://github.com/documentcloud/backbone/issues/41 .
En bref, lorsqu’un utilisateur sélectionne «sortinger par X», vous pouvez:
comparator
sur la collection sort
de Collection (qui déclenchera un événement de sort
) sort
dans votre vue et (effacez et) effacez les éléments Une autre façon de gérer les étapes 1 et 2 consiste à utiliser votre propre méthode qui appelle la méthode sortBy
de Collection, puis déclenche un événement personnalisé que votre View peut écouter.
Mais il semble que la suppression et la redéfinition constituent le moyen le plus simple (et peut-être même le plus rapide) de sortinger vos vues et de les synchroniser avec l’ordre de sorting de votre collection.
Vous pouvez mettre à jour la fonction de comparaison, puis appeler la méthode de sorting.
// update comparator function collection.comparator = function(model) { return model.get('name'); } // call the sort method collection.sort();
La vue sera automatiquement restituée.
comparator
est ce dont vous avez besoin
var PhotoCollection = Backbone.Collection.extend({ model: Photo, comparator: function(item) { return item.get('pid'); } });
Cette méthode fonctionne bien et permet le sorting dynamic par tous les atsortingbutes
et gère l’ ascending
ou la 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; } });